(Надо закончить предложения, введя в input правильное слово в правильной форме) 1. I didn’t have much |форма для ввода| – just two small bags. Форма ввода просто должна сравнить то, что ввели юзеры с правильными ответами, если юзер ввел правильно, ему в переменную var добавилось столько-то баллов, по итогам проверки, результаты вывелись в div, "вы набрали var баллов из 100" чтобы нужные соответствия были в переменных перед началом кода?
Пытался его убедить, что тут нужна сервера обработка, иначе любой школьник может посмотреть на уровне браузера клиента правильные ответы и в консоли набить себе любые баллы
Потому набросал подобный скрипт, в браузере без перезагрузки проверяющий результаты введенных в форму данных по заранее определенному массиву правильных ответов https://jsfiddle.net/4n8f1jh1/На всякий случай код под катом
В форме поля имеют data-id начиная с 0, по этому ID содержимое поле сравнивается с значением элемента массива arrAnswer соответствующего индекса (чтобы избежать, когда в форме в разных полях могут быть одинаковые ответы, числовые к примеру), по результату выдается процент и количество правильных ответов.
Вроде совершенная мелочь, но люди спотыкаются о свое неумение пользоваться гуглом при невозможности написать подобное самостоятельно, грустно, девицы.
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> |
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; }); }); |
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; } |
P.S. пример демонстрационный\обучающий и не предназначен для использования на действующих ресурсах!!!
Комментарии