Learn lowercase letters
Old memories
So I got the question if I could learn my 6 year old son the lowercase alphabet. And that reminded me of one of my first programs I ever wrote. When I had some issues learning English glossaries in 8:th grade (1993), I wrote a program, in Chipmunk Basic, that taught me the glossaries for the week by giving me the words one by one and after I had completed a word twice, the word was removed from the queue. So at the end I only had the hard ones to train on. Running that program once a day raised me from a score at about 40% correct answers to about 95%. So why not try it out here as well.
Lowercase letters
Uppercase letters
Since it was only a matter of moving the .toUpperCase() to the buttons instead of the main letter I also did a copy of the program that shows you a lowercase and you should guess the upper case.
User testing
In my first version of the game you got one star in the end of the game, but my son got bored after completing about 70% of the game. I finished the last letters for him to show him the star at the end. And he immediately said "I want three stars in the end". So I made a small upgrade giving 1 star after 10% completion, 2 stars after 50% completion and 3 stars when the game was completed. This small change made him play the entire game the second time around. So do not underestimate gamification when building learning applications.
// JavaScript - for html and css look at the source of my samples.
// addListner make sure that the listner work in all browsers
var addListener = function(element, eventType, handler, capture) {
if (capture === undefined) { capture = false; }
if (element.addEventListener) {
element.addEventListener(eventType, handler, capture);
} else if (element.attachEvent) {
element.attachEvent("on" + eventType, handler);
}
};
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Game loop
var completed = false;
var ListLearner = (function() {
var letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','å','ä','ö'];
var noLetters = letters.length;
var lettersCompleted = [];
var selectedLetter = -1;
var firstAttemt = true;
var eventLock = false;
var stars = 0;
var gameBoard = document.getElementById('game_board');
var progressBoard = document.getElementById('progress_board');
return {
_showProgress: function() {
var str = '';
var i = 0;
while (i < letters.length) {
str += '<div class="progress_letter_' + lettersCompleted[i] + '">' + letters[i].toUpperCase() + '</div>';
i++;
}
progressBoard.innerHTML = str;
},
init: function() {
var i = 0;
while (i < letters.length) {
lettersCompleted[i] = 0;
i++;
}
this._showProgress();
},
_selectLetter: function() {
//console.log('noLetters: ' + noLetters);
var letter = parseInt(Math.random() * noLetters, 10);
//console.log(letter);
var i = 0;
var select = -1;
while (i < letters.length) {
if (lettersCompleted[i] < 2) {
select++;
if (select == letter) {
selectedLetter = i;
return selectedLetter;
}
}
i++;
}
},
_selectOptionLetters: function(count) {
var retArr = [selectedLetter];
var ok = false
var optionLength = letters.length;
var optionArr = [];
var i = 0;
while (i < letters.length) {
optionArr[i] = 0;
i++;
}
optionArr[selectedLetter] = 1;
optionLength--;
while (retArr.length < count) {
var letter = parseInt(Math.random() * optionLength, 10);
ok = true;
var j = 0;
var select = -1;
while (j < letters.length) {
if (optionArr[j] == 0) {
select++;
if (select == letter) {
retArr[retArr.length] = j;
optionArr[j] = 1;
optionLength--;
}
}
j++;
}
}
return shuffle(retArr);
},
_letterClickVerifiation: function(e) {
var clicked = e.currentTarget;
if (selectedLetter === +e.target.id) {
clicked.style.background = '#3c3';
if (firstAttemt) {
firstAttemt = false;
lettersCompleted[selectedLetter]++;
if (lettersCompleted[selectedLetter] === 2) {
noLetters--;
}
}
if (!eventLock) {
eventLock = true;
ListLearner._showProgress();
if (noLetters === 0) {
window.setTimeout(ListLearner.success3, 500);
} else {
var score = ((letters.length-noLetters)/letters.length);
if (score > 0.1 && stars === 0) {
stars = 1;
window.setTimeout(ListLearner.success1, 500);
} else if (score > 0.5 && stars === 1) {
stars = 2;
window.setTimeout(ListLearner.success2, 500);
} else {
window.setTimeout(ListLearner.play, 500);
}
}
}
} else {
firstAttemt = false;
clicked.style.background = '#c33';
}
//console.log(e.target.id);
},
_letterClick: function() {
var btnArr = document.getElementsByClassName('alternative');
var i = 0;
while (i < btnArr.length) {
addListener(btnArr[i], 'click', this._letterClickVerifiation);
i++;
}
},
play: function() {
firstAttemt = true;
eventLock = false;
ListLearner._selectLetter();
var alt = ListLearner._selectOptionLetters(4);
var str = '<div id="capital">' + letters[selectedLetter].toUpperCase() + '</div>';
str += '<div id="alternative_list">';
var i = 0;
while (i < alt.length) {
str += '<div class="alternative" id="' + alt[i] + '">' + letters[alt[i]] + '</div>';
i++;
}
str += '</div>';
gameBoard.innerHTML = str;
// Apply eventhandlers
ListLearner._letterClick();
},
success1: function() {
gameBoard.innerHTML = '<img src="star.png" style="width: 30%; padding-top: 40px;">';
window.setTimeout(ListLearner.play, 2000);
},
success2: function() {
gameBoard.innerHTML = '<div id="stars"><img src="star.png" style="width: 20%; padding-top: 40px;"><img src="star.png" style="width: 20%; padding-top: 40px;"></div>';
window.setTimeout(ListLearner.play, 2000);
},
success3: function() {
gameBoard.innerHTML = '<div id="stars"><img src="star.png" style="width: 20%; padding-top: 40px;"><img src="star.png" style="width: 30%; padding-top: 40px;"><img src="star.png" style="width: 20%; padding-top: 40px;"></div>';
}
};
})();
ListLearner.init();
ListLearner.play();
- Learn, Kids, Alphabet, JavaScript