2018 03 февраля

Скрипт тестирование на JavaScript (jQuery)

Метки:
На форуме один из пользователей очень хотел нечто подобное:
(Надо закончить предложения, введя в input правильное слово в правильной форме) 1. I didn’t have much |форма для ввода| – just two small bags. Форма ввода просто должна сравнить то, что ввели юзеры с правильными ответами, если юзер ввел правильно, ему в переменную var добавилось столько-то баллов, по итогам проверки, результаты вывелись в div, "вы набрали var баллов из 100" чтобы нужные соответствия были в переменных перед началом кода?

Пытался его убедить, что тут нужна сервера обработка, иначе любой школьник может посмотреть на уровне браузера клиента правильные ответы и в консоли набить себе любые баллы

Потому набросал подобный скрипт, в браузере без перезагрузки проверяющий результаты введенных в форму данных по заранее определенному массиву правильных ответов https://jsfiddle.net/4n8f1jh1/

На всякий случай код под катом

В форме поля имеют data-id начиная с 0, по этому ID содержимое поле сравнивается с значением элемента массива arrAnswer соответствующего индекса (чтобы избежать, когда в форме в разных полях могут быть одинаковые ответы, числовые к примеру), по результату выдается процент и количество правильных ответов.

Вроде совершенная мелочь, но люди спотыкаются о свое неумение пользоваться гуглом при невозможности написать подобное самостоятельно, грустно, девицы.

HTML разметка

1
23
45
67
89
1011
1213
<form name="testform" action="#" method="post" id="testform" class="wrapper">
        Сползает по крыше старик Козлодоев,<br />        Пронырливый, как <input name="Name" type="text" data-id="0" class="answer inputbox" value="" title="коростель" placeholder="введите ответ: коростель" />.
        <hr />        Стремится в окошко залезть Козлодоев<br />
        К какой-нибудь <input name="Name" type="text" data-id="1" class="answer inputbox" value="" title="бабе" placeholder="введите ответ: бабе" />  в постель. 
        <input type="submit" class="btn" value="Проверить текст" /> 
        <div class="result">                Ваш результат: <span class="result_text">пока ноль</span>
        </div></form>

JavaScript (jQuery уж не обесудьте)

1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
3233
3435
3637
3839
4041
4243
4445
4647
48
$(window).on('load', function(){
    /*        массив с правильными ответами, проверять будем по совпадению data-id с индексом элемента массива
        потому в хтмл инпуты с классом .answer нумеруем в data-id с нуля и по возрастанию    */
        var arrAnswer = ['коростель', 'бабе']; 
        // сабмитим форму, проверяем всякое и отдаем результат        $('#testform').on('submit', function(e) {
         var thisform = $(this);
        var questionCount = thisform.find('.answer').length; // количество инпутов\вопросов        var countRight = 0; // количество правильных
        var resultText = ''; // текст о результатах        var inputClass = ''; // класс инпута правильно\неправильно
        var percent = 0; // процент правильных (просто для красоты)        var resultTextClass = ''; // класс для подсветки результирующего текста
        $('.result').removeClass('good bad' ); 
        thisform.find('.answer').each(function(){            $(this).removeClass('good bad' ); // сбросим классы инпута
                         var answerid = $(this).attr('data-id'); // ID инпута вопроса
                        var answerval = $(this).val(); // значение инпута вопроса от пользователя 
                        var rightAnswer = arrAnswer[answerid];  // правильный ответ для данного инпута из массива 
                        if (answerval == rightAnswer) {                countRight = ++countRight; // увеличим счетчик правильных на +1
                                inputClass = 'good'; // установим класс                        } else {
                inputClass = 'bad';                        }
                        $(this).addClass(inputClass);                });
                 percent = Math.floor((countRight / questionCount) * 100);
                if (percent > 50) {                resultTextClass = 'good'; // установим класс
                } else {            resultTextClass = 'bad'; // установим класс
                }                resultText = 'правильно '+percent+'% '+countRight+' вопроса из '+questionCount+'';
        $('.result .result_text').text(resultText);        $('.result').addClass(resultTextClass);
        return false;        });
});

CSS немного стилей

1
23
45
67
89
1011
1213
1415
1617
1819
2021
2223
2425
2627
28
.wrapper {
        padding: 20px 40px; font-family: 'Arial'; font-size: 16px;}
.wrapper .inputbox {        display: inline-block; width: 200px; border: 1px solid #000; text-align: center; padding: 5px 10px;
}.wrapper .inputbox.good {
        background: #b5ffa9;}
.wrapper .inputbox.bad {        background: #FC2626;
}.wrapper .btn {
        display: block; margin: 30px 0; border: 0; background: #000; color: #fff; text-align: center; padding: 10px 20px;        text-transform: uppercase; cursor: pointer;
}.wrapper .btn:hover {
        background: #FC2626;}
.result {        margin: 50px 0; font-weight: bold;
}.result.good {
        color: #4ea140;}
.result.bad {        color: #FC2626;
}
https://jsfiddle.net/4n8f1jh1/

P.S. пример демонстрационный\обучающий и не предназначен для использования на действующих ресурсах!!!

Комментарии

Оставить коммент

Защитный код
Обновить