Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2014, 02:57
Новичок на форуме
Отправить личное сообщение для konfetka_ksu Посмотреть профиль Найти все сообщения от konfetka_ksu
 
Регистрация: 20.03.2014
Сообщений: 1

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

Очень надеюсь на вашу помощь!!!спасибо!!!
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2014, 10:56
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Я так понимаю у тебя там не просят дизайнерских изысков, а только интерфейс? Какие инструменты можно использовать - определенные, или все что душе угодно?
Тут можно обойтись только 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('неверно')}
}
});

Примерно так.
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2014, 14:40
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Вопросы предпочтительно описывать в структуре данных а не в 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);
})
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 20.03.2014 в 14:57.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ajax ссылки для сайта l-liava-l Оффтопик 19 23.02.2013 17:20
Скрипт для сайта second.by soldierden Firefox/Mozilla 0 22.01.2013 16:51
Конструктор для сайта core Работа 6 17.11.2012 19:55
Бесплатный движок для сайта greatilya Ваши сайты и скрипты 9 03.05.2009 15:28
Либа для создания окон Кирпич Библиотеки/Тулкиты/Фреймворки 8 25.06.2008 16:44