学习外来词

最新推荐文章于 2024-07-25 16:45:46 发布

cuketao5066

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量95

点赞数

文章标签：列表 css html js gwt ViewUI

原文链接：https://www.script-tutorials.com/learning-foreign-words/

版权

Learning Foreign Words Do you think that learning new foreign words is tedious? Each of us could face with learning of new languages. Sure, it can be tiresome especially if you try to remember a plenty of new words at once. But what if to memorize words sequentially, one by one? I believe that this is one of good solutions. I prepared a simple but at the same time efficient script that will help you in learning new words. This script takes a list of new words, and turns it into a slider where you have to guess if you know the word or not. If you are uncertain of the word – press the button ‘I know’, otherwise – just skip the word. We also can finish the test or do hint.

学习外语您认为学习新外语乏味吗？我们每个人都可能面对新语言的学习。当然，这可能很烦人，特别是如果您尝试一次记住很多新单词。但是，如果要一个接一个地顺序记住单词怎么办？我相信这是很好的解决方案之一。我准备了一个简单但同时高效的脚本，它将帮助您学习新单词。该脚本获取一个新单词列表，并将其变成一个滑块，您必须在其中猜测是否知道该单词。如果您不确定单词，请按“我知道”按钮，否则，请跳过单词。我们也可以完成测试或提示。

现场演示

Our demo represents a way to learn English language for Russians. The main words are in English, and translations are in Russian.

我们的演示代表了一种学习俄语的英语方法。主要的单词是英语，翻译是俄语。

步骤1. PHP (Step 1. PHP)

The main layout is quite simple – there are the list of words (slider), the counter and four action buttons. But before we build the main scene, we have to prepare an array with words to display on the page. I decided to keep all unknown words (with translations) in a text file (words.txt). Words and translations are separated with hyphen. Each pair is located on the line. The result array is shuffled.

主要布局非常简单-包含单词列表(滑块)，计数器和四个操作按钮。但是在构建主场景之前，我们必须准备一个包含单词的数组以显示在页面上。我决定将所有未知单词(包括翻译)保留在文本文件(words.txt)中。单词和翻译用连字符分隔。每对都位于线路上。结果数组被重新排列。

index.php (index.php)


$aRows = @file('words.txt');
$aRows = array_filter( $aRows,
    function($el){
        $el = trim($el);
        return ($el != '' && strlen($el) > 2);
    }
);
shuffle($aRows);
$iCnt = count($aRows);
$sRet = ''; $i = 1;
foreach ($aRows as $sRow) {
    list($sEnWord, $sTranslation) = explode(' - ', $sRow);
    $sEnWord = trim($sEnWord);
    $sTranslation = mb_convert_encoding(trim($sTranslation), 'UTF-8', 'Windows-1251');
    $sRet .= "<div><p class='text'>{$i}/{$iCnt} {$sEnWord}</p><p class='translation'>{$sTranslation}</p></div>\r\n";
    $i++;
}
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>Learn English Words | Script Tutorials</title>
    <!-- add styles and scripts -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        var iWordsCnt = <?= $iCnt ?>;
    </script>
    <script src="js/main.js"></script>
</head>
<body>
    <h2 id="counter" class="center"></h2>
    <div id="main-wrapper" class="box">
        <?= $sRet ?>
    </div>
    <div class="center">
        <button id="translate_btn">Hint &uarr;</button><br />
        <button id="skip_btn">&larr; Skip it</button> <button id="know_btn">I know it &rarr;</button><br />
        <button id="finish_btn">Finish &darr;</button>
    </div>
    <div id="results" class="center box"></div>
</body>
</html>


$aRows = @file('words.txt');
$aRows = array_filter( $aRows,
    function($el){
        $el = trim($el);
        return ($el != '' && strlen($el) > 2);
    }
);
shuffle($aRows);
$iCnt = count($aRows);
$sRet = ''; $i = 1;
foreach ($aRows as $sRow) {
    list($sEnWord, $sTranslation) = explode(' - ', $sRow);
    $sEnWord = trim($sEnWord);
    $sTranslation = mb_convert_encoding(trim($sTranslation), 'UTF-8', 'Windows-1251');
    $sRet .= "<div><p class='text'>{$i}/{$iCnt} {$sEnWord}</p><p class='translation'>{$sTranslation}</p></div>\r\n";
    $i++;
}
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>Learn English Words | Script Tutorials</title>
    <!-- add styles and scripts -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        var iWordsCnt = <?= $iCnt ?>;
    </script>
    <script src="js/main.js"></script>
</head>
<body>
    <h2 id="counter" class="center"></h2>
    <div id="main-wrapper" class="box">
        <?= $sRet ?>
    </div>
    <div class="center">
        <button id="translate_btn">Hint &uarr;</button><br />
        <button id="skip_btn">&larr; Skip it</button> <button id="know_btn">I know it &rarr;</button><br />
        <button id="finish_btn">Finish &darr;</button>
    </div>
    <div id="results" class="center box"></div>
</body>
</html>

As you can see, this time we decided to generate the entire page (including HTML code) in this file. In addition, it also works on cell phones (because of its responsive layout). Thus, you easily can use it on your mobile phone.

如您所见，这次我们决定在此文件中生成整个页面(包括HTML代码)。此外，它还可以在手机上运行(由于其响应式布局)。因此，您可以轻松地在手机上使用它。

步骤2. CSS (Step 2. CSS)

In this section we start decorating the page. There are general styles (body, box and button styles) and custom styles (of the #main-wrapper and its inner objects):

在本节中，我们将开始装饰页面。有常规样式(主体样式，框样式和按钮样式)和自定义样式(＃main-wrapper及其内部对象的样式)：

css / style.css (css/style.css)


* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #EFEFEF;
}
.center {
    text-align:center;
}
.box {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #222222;
}
button {
    background: -webkit-linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#F7F7F7',GradientType=0 );
    border-color: #E0E0E0 #E0E0E0 #CDCDCD;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    cursor: pointer;
    font-weight: normal;
    line-height: normal;
    margin: 0 0.5em 1em;
    padding: 10px 15px;
    text-shadow: 0 1px 0 transparent;
}
button:hover {
    background: -webkit-linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A8F3', endColorstr='#479CEB',GradientType=0 );
    border-color: #3990DB #3990DB #2F78B7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
button:active {
    background: -webkit-linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F96E5', endColorstr='#55A6F1',GradientType=0 );
    border-color: #3990DB #3990DB #2F78B7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#main-wrapper {
    height: 60px;
    margin: 1em auto 2em;
    overflow: hidden;
    padding-bottom: 1em;
    position: relative;
    width: 90%;
}
#main-wrapper div {
    opacity: 0;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
#main-wrapper div.active {
    opacity: 1;
    z-index: 1;
}
#main-wrapper .translation {
    display: none;
}
#results {
    display: none;
    margin: 2em auto 0;
    overflow: hidden;
    padding: 1em;
    position: relative;
    width: 90%
}
#results p {
    display: inline;
    margin-right: 1em;
}
#results p.translation {
    color: #56595E;
}


* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #EFEFEF;
}
.center {
    text-align:center;
}
.box {
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #222222;
}
button {
    background: -webkit-linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#F7F7F7',GradientType=0 );
    border-color: #E0E0E0 #E0E0E0 #CDCDCD;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #FFFFFF inset;
    color: #444444;
    cursor: pointer;
    font-weight: normal;
    line-height: normal;
    margin: 0 0.5em 1em;
    padding: 10px 15px;
    text-shadow: 0 1px 0 transparent;
}
button:hover {
    background: -webkit-linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A8F3', endColorstr='#479CEB',GradientType=0 );
    border-color: #3990DB #3990DB #2F78B7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
button:active {
    background: -webkit-linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
    background: -moz-linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
    background: linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F96E5', endColorstr='#55A6F1',GradientType=0 );
    border-color: #3990DB #3990DB #2F78B7;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#main-wrapper {
    height: 60px;
    margin: 1em auto 2em;
    overflow: hidden;
    padding-bottom: 1em;
    position: relative;
    width: 90%;
}
#main-wrapper div {
    opacity: 0;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
#main-wrapper div.active {
    opacity: 1;
    z-index: 1;
}
#main-wrapper .translation {
    display: none;
}
#results {
    display: none;
    margin: 2em auto 0;
    overflow: hidden;
    padding: 1em;
    position: relative;
    width: 90%
}
#results p {
    display: inline;
    margin-right: 1em;
}
#results p.translation {
    color: #56595E;
}

There are two boxes (with the words and with results) and four centered buttons on the page.

页面上有两个框(带有单词和结果)和四个居中按钮。

步骤2. Javascript (Step 2. Javascript)

This section is interesting enough, it helps to understand how the script works in general:

本节足够有趣，有助于您大致了解脚本的工作方式：

js / main.js (js/main.js)


var iCnt = 0; // current step
var iSkipCnt = 0; // skip counter
var sSkipWord = ''; // skip word
// update the counter
function updateCounter() {
    $('#counter').html(iCnt);
}
// next a word
function nextWord() {
    iCnt++
    updateCounter();
    // display next word
    $('.active').removeClass('active').next().addClass('active');
    if ( $('.active').is('#main-wrapper :last') == true ) {
        finishTest();
    }
}
// skip a word
function skipWord() {
    iSkipCnt++;
    // remember a skipped word
    var sText = $('.active .text').html();
    var sTranslation = $('.active .translation').html();
    sSkipWord += '<div><p class="text">'+sText+'</p><p class="translation">'+sTranslation+'</p></div>';
    // display next word
    $('.active').removeClass('active').next().addClass('active');
    if ( $('.active').is('#main-wrapper :last') == true ) {
        finishTest();
    }
}
// translate a word
function translateWord() {
    $('.active .translation').fadeIn(1000, function () {
        $(this).fadeOut(1000);
    });
}
// finish the test
function finishTest() {
    var fPerc = Math.round(100 * iCnt / iWordsCnt);
    var sFinishTitle = '<h3>Congratulations, your result is '+fPerc+'% ('+iSkipCnt+' skipped words)</h3>';
    $('#results').html(sFinishTitle + sSkipWord).show();
}
// initialization
$(document).ready(function() {
    updateCounter();
    $(window).keypress(function(e) {
       switch (e.keyCode) {
        case 37:
            skipWord();
        break;
        case 38:
            translateWord();
        break;
        case 39:
            nextWord();
        break;
        case 40:
            finishTest();
        break;
       }
    });
    $('#know_btn').click(function () {
        nextWord();
    });
    $('#skip_btn').click(function () {
        skipWord();
    });
    $('#translate_btn').click(function () {
        translateWord();
    });
    $('#finish_btn').click(function () {
        finishTest();
    });
    $('#main-wrapper :first').addClass('active');
});


var iCnt = 0; // current step
var iSkipCnt = 0; // skip counter
var sSkipWord = ''; // skip word
// update the counter
function updateCounter() {
    $('#counter').html(iCnt);
}
// next a word
function nextWord() {
    iCnt++
    updateCounter();
    // display next word
    $('.active').removeClass('active').next().addClass('active');
    if ( $('.active').is('#main-wrapper :last') == true ) {
        finishTest();
    }
}
// skip a word
function skipWord() {
    iSkipCnt++;
    // remember a skipped word
    var sText = $('.active .text').html();
    var sTranslation = $('.active .translation').html();
    sSkipWord += '<div><p class="text">'+sText+'</p><p class="translation">'+sTranslation+'</p></div>';
    // display next word
    $('.active').removeClass('active').next().addClass('active');
    if ( $('.active').is('#main-wrapper :last') == true ) {
        finishTest();
    }
}
// translate a word
function translateWord() {
    $('.active .translation').fadeIn(1000, function () {
        $(this).fadeOut(1000);
    });
}
// finish the test
function finishTest() {
    var fPerc = Math.round(100 * iCnt / iWordsCnt);
    var sFinishTitle = '<h3>Congratulations, your result is '+fPerc+'% ('+iSkipCnt+' skipped words)</h3>';
    $('#results').html(sFinishTitle + sSkipWord).show();
}
// initialization
$(document).ready(function() {
    updateCounter();
    $(window).keypress(function(e) {
       switch (e.keyCode) {
        case 37:
            skipWord();
        break;
        case 38:
            translateWord();
        break;
        case 39:
            nextWord();
        break;
        case 40:
            finishTest();
        break;
       }
    });
    $('#know_btn').click(function () {
        nextWord();
    });
    $('#skip_btn').click(function () {
        skipWord();
    });
    $('#translate_btn').click(function () {
        translateWord();
    });
    $('#finish_btn').click(function () {
        finishTest();
    });
    $('#main-wrapper :first').addClass('active');
});

As you can see, besides of clicking on the buttons, we can also use the keyboard (arrow buttons) to handle with buttons. There are four key functions:

如您所见，除了单击按钮之外，我们还可以使用键盘(箭头按钮)来处理按钮。有四个关键功能：

translateWord – to translate the word (to display its translation for a moment)
translateWord –翻译单词(显示其翻译片刻)
nextWord – to hide the current word (slide) and to display a next one
nextWord –隐藏当前单词(幻灯片)并显示下一个单词
skipWord – to ‘skip’ the current word. In this moment the script saves the current pair (word-translation) into memory.
skipWord –“跳过”当前单词。此时，脚本将当前对(单词翻译)保存到内存中。
finishTest – to display results: the script will display all the words you skipped. The main objective is to remember me the maximum number of words as possible (from this list of ‘unknown’ words.
finishTest –显示结果：脚本将显示您跳过的所有单词。主要目的是记住我尽可能多的单词(从“未知”单词列表中)。

现场演示

[sociallocker]

[社交储物柜]

下载资源

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

This method lf learning new words allows you to train your memory well, you will notice that after a few days you’ll have to distinguish new words that you previously did not know at all. If any word is already learned well enough, just remove it from the ‘words.txt’ file, and add new words that you do not already know. Good luck and welcome back

通过学习新单词的这种方法，您可以很好地训练自己的记忆力，您会注意到，几天后，您将不得不区分以前根本不知道的新单词。如果已经学会了任何单词，只需将其从“ words.txt”文件中删除，然后添加您不知道的新单词。祝你好运，欢迎回来

翻译自: https://www.script-tutorials.com/learning-foreign-words/

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习外来词

带有外来语的日语句子Learning Foreign Words Do you think that learning new foreign words is tedious? Each of us could face with learning of new languages. Sure, it can be tiresome especially if you try to remem...
复制链接

扫一扫