Learning Foreign Words

Learning Foreign Words

0 12675
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.

Live Demo

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

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.

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>

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.

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):

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;
}

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

Step 2. Javascript

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

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');
});

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)
  • nextWord – to hide the current word (slide) and to display a next one
  • skipWord – to ‘skip’ the current word. In this moment the script saves the current pair (word-translation) into memory.
  • 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.

Live Demo

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

SIMILAR ARTICLES

jQuery Mobile Lesson 6

0 60
jQuery Mobile Lesson 5

0 75

NO COMMENTS

Leave a Reply