Question

Actually the question: I do not know how to do it myself, and I have no idea what to look for in Google to understand how such do this I ask you, dear community!

Screen attached:

How do to it retained scored circles, and the next set, the possibility of it only after the entry of theirs to start up in a program?

I’ve done some, DEMO, but I need to do dragging sticks as I have no idea

var codeBut = $('#code_block td div').addClass('common_class');
var res = $('#res');
var uname = $('#uname');
var codeArr = [];

Array.prototype.remove=function(s){
    for (i=0; i < this.length; i++){
        if (s == this[i]){
            this.splice(i, 1);
            --i;
        }
    }
};

codeBut.click(function(){
    $(this).toggleClass('choiced');
    if($(this).hasClass('choiced')){
        codeArr.push($(this).text());
    } else {
        codeArr.remove($(this).text());
    }
    res.text(codeArr.join(''));
    if(res.text() === ''){
        res.rext('');
    }
});

function clearInfo(){
    uname.val('');
    codeBut.removeClass('choiced');
    codeArr = [];
    res.text('');
}

$('#reg').click(function(){
    var userName = $.trim(uname.val());
    var userPass = $.trim(codeArr.join(''));
    if(!localStorage.getItem(userName)){
        if(userName !== '' && userPass !== '') {
            localStorage.setItem(userName, userPass);        
        } else {
            alert('Имя или пароль не введены!');
        }
    } else {
        alert('Это имя уже используется!');
    }
    clearInfo();
});
$('#login').click(function(){
    var userName = $.trim(uname.val());
    var userPass = $.trim(codeArr.join(''));
    var curPass = localStorage.getItem(userName);
    if(curPass != null){
        if(curPass == userPass) {
            localStorage.setItem(userName, userPass);
            alert('Ух, ты! Здарофф ' + userName + '! Пиво будешь?');
            clearInfo();
        } else {
            alert('Парольчик корректный введите, плиззз!!!');
        }
    } else {
        alert('Юзверя с таким именем - нет!');
        clearInfo();
    }
});
//localStorage.clear();

Answer 1

There is a project at codeplex that implements that feature in javascript: http://9dotpatternlock.codeplex.com/