Техника создания интерфейса для сайта

[konfetka_ksu]

Всем привет! Для моей практики в универе мне надо создать интерфейс для сайта по типу вопрос? Ответ да/нет проверить правильный ли ответ число неправильных ответов должно быть ограничено....в целом очень подобный тому который используется на сайте www.duolingo.com когда при изучении языка тебя просят перевести фразу, пишешь ответ и тебе говорят правильный ответ или нет и если ошибся у тебя убывают "жизни"...
Идеи как создан этот интерфейс на дуолинго? Кто нибудь мне может подсказать от чего нужно отталкиваться? Что мне необходимо для создания этого интерфейса?

Очень надеюсь на вашу помощь!!!спасибо!!!

[krasovsky]

Я так понимаю у тебя там не просят дизайнерских изысков, а только интерфейс? Какие инструменты можно использовать - определенные, или все что душе угодно?
Тут можно обойтись только html+js, а можно и с php(или любой другой серверный язык) поиграться.

В первом случае концепция такая:
1 в html-файле пишем список вопросов с со списком ответов или инпутом для написания ответа

<div class="q-1 text" data-answer="cat">// в атрибут data-aswer спрятан ответ
<p>Переведите на английский слово "кошка"<p> // вопрос
<input type="text" value=""> //сюда писать текст ответ
<div class="check">Проверить</div>
</div>

<div class="q-2" >//тут нет дата потому что не потребуется
<p>Как по англ будет  "кошка"<p>
<input type="radio" value="0">dog<br/> //кнопки для выбора ответа
<input type="radio" value="1"> cat<br/>
<input type="radio" value="0"> bird<br/>
<div class="check">Проверить</div>
</div>

$('.check').click(function(){//по клику на кнопу проверить
var parent = $(this).parent();//получаем родителя нашей кнопки - это div с классом q-*
if (parent.hasClass('text')) {// если тип ответа - текст
var answer = parent.children('input').text();// берем ответ пользователя
var dataAnswer = parent.attr('data-answer');// берем правильный ответ
if (answer.match(dataAnswer )) {alert('верно')}//тут грубое сравнение ответов, для примера сойдет
else {alert('неверно')}
}
else {// если тип ответа выбор кнопки
if (parent.children('input:checked')[0].value == 1 ) {alert('верно')}
else {alert('неверно')}
}
});

Примерно так.

[DjDiablo]

Вопросы предпочтительно описывать в структуре данных а не в html
а формы генерировать на лету из данных
Это если делать по уму так сказать.

Чисто схематичный пример

tests=[
   {
        vopros:"как когка по английски",
        variants:["cat","dog","bat","mouse"],
        otvet:0  
   },

   {
        vopros:"как собака по по английски",
        variants:["cat","dog","bat","mouse"],
        otvet:1  
   }
]

num=0;

//генерируем html 
render (num){
    $('#caption').html ("вопрос номер "+num)
    $('#vopros').html ("Вопрос: "+tests[num].vopros)
    $('#variant').empty()
    for (var i-0;i<tests[num].variant.length;i++){
        $('#variant').append('<input type="radio" name="otvet" value="'+i+'">'+ tests[num].variants[i]+'<br>' );    
    }
}

//Действие по клику за результат
$('#result).click(function(){
     //проверка и действия

     //увеличиваем счетчик
     num++;
     
     //рендерим следующий вопрос
     render(num);
})