Создание нового типа инпута в тесте
Всем привет, задание: написать тест с тремя видами инпутов (радио, чекбокс, ввод ответа текстом). Так вот, не получается сделать инпут текстом, прошу помощи,и еще нужно проверить правильность введённого, с переводом в один регистр. Мой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Тест 2</title>
<meta charset="utf-8">
<style>
#check {
display: none;
}
#test {
display: none;
}
</style>
</head>
<body background="logo1.png">
<div id="icapt">
<p id="text"></p>
<input type="text" id="captchaEdit" value="" />
<input type="submit" value="Отправить" onClick="checkCaptcha();" />
</div>
<ul id="test">
<li class="question">
Что из перечисленного не является операцией сравнения?
<ul>
<li><label><input type="checkbox" data-true>a = b</label></li>
<li><label><input type="checkbox">a != b</label></li>
<li><label><input type="checkbox" data-true>a ==== b</label></li>
</ul>
</li>
<li class="question">
<div id="test">
<div>
<p>вопрос 1?</p>
<input data-right="ответ 1">
</div>
<div>
<p>вопрос 2?</p>
<input data-right="ответ 2">
</div>
<div>
<p>вопрос 3?</p>
<input data-right="ответ 3">
</div>
</div>
Как выглядит однострочный комментарий в JS?
<ul>
<li><label><input type="radio" name="question1" data-true>//</label></li>
<li><label><input type="radio" name="question1">/**/</label></li>
<li><label><input type="radio" name="question1">< !-- --></label></li>
</ul>
</li>
<li class="question">
Что получится, если сложить true + false?
<ul>
<li><label><input type="radio" name="question2">NaN</label></li>
<li><label><input type="radio" name="question2">0</label></li>
<li><label><input type="radio" name="question2" data-true>1</label></li>
</ul>
</li>
<li class="question">
Выберите то, что является типом данных в JS
<ul>
<li><label><input type="checkbox" data-true>object</label></li>
<li><label><input type="checkbox">num</label></li>
<li><label><input type="checkbox" data-true>null</label></li>
</ul>
</li>
<input type="button" id="next" value="Следующий вопрос">
<input type="button" id="check" value="Проверить">
</ul>
<div>
<p>вопрос 1?</p>
<input data-right="ответ 1">
</div>
<div>
<p>вопрос 2?</p>
<input data-right="ответ 2">
</div>
<div>
<p>вопрос 3?</p>
<input data-right="ответ 3">
</div>
<script>
var checkEl = document.getElementById('check');
var nextEl = document.getElementById('next');
var questionsEl = document.getElementsByClassName('question');
var result = [];
var now = 0;
nextEl.addEventListener('click', next);
checkEl.addEventListener('click', checkAnswers);
var c;
function captcha(){
let a = Math.ceil(Math.random() * 10)
let b = Math.ceil(Math.random() * 10)
c = a + b
document.getElementById('text').innerHTML='Сколько будет ' + a + ' + ' + b + '?';
}
function checkCaptcha(){
d = document.getElementById('captchaEdit').value;
if(d == c) {
alert('Правильный ответ!');
document.getElementById('icapt').style.display = 'none'
document.getElementById('test').style.display = 'block'
showAnswer();
now++;
}
else {
alert('Неправильный ответ, попробуйте еще раз.')
captcha()
}
}
function next() {
showAnswer();
now++
if (!questionsEl[now]) {
nextEl.style.display = 'none';
checkEl.style.display = 'block';
}
}
function showAnswer() {
for (var i = 0; i < questionsEl.length; i++) {
questionsEl[i].style.display = 'none';
}
questionsEl[now].style.display = 'block';
}
function checkAnswers() {
for (var i = 0; i < questionsEl.length; i++) {
var answers = questionsEl[i].querySelectorAll('input[type=checkbox], input[type=radio]', input[type=]);
result.push( checkOneAnswer(answers) );
}
printResult();
result = [];
}
function checkOneAnswer(answers) {
var result = null;
var noAnswer = true;
for (var i = 0; i < answers.length; i++) {
var isTrue = (answers[i].getAttribute('data-true') !== null);
if (answers[i].checked) {
noAnswer = false;
if (isTrue) {
result = true;
} else {
result = false;
}
} else {
if (isTrue) {
result = false;
}
}
}
if (noAnswer) {
result = null;
}
return result;
}
function printResult() {
var trueAnswers = 0;
var falseAnswers = 0;
var noAnswers = 0;
for (var i = 0; i < result.length; i++) {
if (result[i] === true) {
trueAnswers++;
} else if (result[i] === false) {
falseAnswers++;
} else if (result[i] === null) {
noAnswers++;
}
}
var all = trueAnswers + falseAnswers + noAnswers;
var percent = Math.round((trueAnswers/all) * 100);
var msg = 'Правильных ответов: ' + trueAnswers + ' (' + percent + '%)\n'
+ 'Неправильных ответов: ' + falseAnswers + '\n'
+ 'Без ответов: ' + noAnswers + '\n';
alert(msg);
}
captcha();
</script>
</body>
</html>
|
Alena_03,
строка 141 уберите Цитата:
|
рони, всё равно не работает, убрала, есть еще вариант, но тоже не работает:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Тест по JS</title>
<meta charset="utf-8">
<style>
#check {
display: none;
}
#test {
display: none;
}
</style>
</head>
<body background="logo1.png">
<div id="icapt">
<p id="text"></p>
<input type="text" id="captchaEdit" value="" />
<input type="submit" value="Отправить" onClick="checkCaptcha();" />
</div>
<ul id="test">
<li class="question">
Что из перечисленного не является операцией сравнения?
<ul>
<li><label><input type="checkbox" data-true>a = b</label></li>
<li><label><input type="checkbox">a != b</label></li>
<li><label><input type="checkbox" data-true>a ==== b</label></li>
</ul>
</li>
<li class="question">
<p>вопрос 1?</p>
<ul>
<li><label><input data-right="ответ 1"></label></li>
</ul>
</li>
<li class="question">
<p>вопрос 2?</p>
<ul>
<li><label><input data-right="ответ 2"></label></li>
</ul>
</li>
<li class="question">
Как выглядит однострочный комментарий в JS?
<ul>
<li><label><input type="radio" name="question1" data-true>//</label></li>
<li><label><input type="radio" name="question1">/**/</label></li>
<li><label><input type="radio" name="question1">< !-- --></label></li>
</ul>
</li>
<li class="question">
Что получится, если сложить true + false?
<ul>
<li><label><input type="radio" name="question2">NaN</label></li>
<li><label><input type="radio" name="question2">0</label></li>
<li><label><input type="radio" name="question2" data-true>1</label></li>
</ul>
</li>
<li class="question">
Выберите то, что является типом данных в JS
<ul>
<li><label><input type="checkbox" data-true>object</label></li>
<li><label><input type="checkbox">num</label></li>
<li><label><input type="checkbox" data-true>null</label></li>
</ul>
</li>
<input type="button" id="next" value="Следующий вопрос">
<input type="button" id="check" value="Проверить">
</ul>
<script>
var checkEl = document.getElementById('check');
var nextEl = document.getElementById('next');
var questionsEl = document.getElementsByClassName('question');
var result = [];
var now = 0;
nextEl.addEventListener('click', next);
checkEl.addEventListener('click', checkAnswers);
var c;
function captcha(){
let a = Math.ceil(Math.random() * 10)
let b = Math.ceil(Math.random() * 10)
c = a + b
document.getElementById('text').innerHTML='Сколько будет ' + a + ' + ' + b + '?';
}
function checkCaptcha(){
d = document.getElementById('captchaEdit').value;
if(d == c) {
alert('Правильный ответ!');
document.getElementById('icapt').style.display = 'none'
document.getElementById('test').style.display = 'block'
showAnswer();
now++;
}
else {
alert('Неправильный ответ, попробуйте еще раз.')
captcha()
}
}
function next() {
showAnswer();
now++
if (!questionsEl[now]) {
nextEl.style.display = 'none';
checkEl.style.display = 'block';
}
}
function showAnswer() {
for (var i = 0; i < questionsEl.length; i++) {
questionsEl[i].style.display = 'none';
}
questionsEl[now].style.display = 'block';
}
function checkAnswers() {
for (var i = 0; i < questionsEl.length; i++) {
var answers = questionsEl[i].querySelectorAll('input[type=checkbox], input[type=radio], input[type=text]');
result.push( checkOneAnswer(answers) );
}
printResult();
result = [];
}
function checkOneAnswer(answers) {
var result = null;
var noAnswer = true;
for (var i = 0; i < answers.length; i++) {
var isTrue = (answers[i].getAttribute('data-true') !== null);
if (answers[i].checked) {
noAnswer = false;
if (isTrue) {
result = true;
} else {
result = false;
}
} else {
if (isTrue) {
result = false;
}
}
}
if (noAnswer) {
result = null;
}
return result;
}
function printResult() {
var trueAnswers = 0;
var falseAnswers = 0;
var noAnswers = 0;
for (var i = 0; i < result.length; i++) {
if (result[i] === true) {
trueAnswers++;
} else if (result[i] === false) {
falseAnswers++;
} else if (result[i] === null) {
noAnswers++;
}
}
var all = trueAnswers + falseAnswers + noAnswers;
var percent = Math.round((trueAnswers/all) * 100);
var msg = 'Правильных ответов: ' + trueAnswers + ' (' + percent + '%)\n'
+ 'Неправильных ответов: ' + falseAnswers + '\n'
+ 'Без ответов: ' + noAnswers + '\n';
alert(msg);
}
captcha();
</script>
</body>
</html>
|
Цитата:
например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
рони,
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Тест по JS</title>
<meta charset="utf-8">
<style>
#check {
display: none;
}
#test {
display: none;
}
</style>
</head>
<body background="logo1.png">
<div id="icapt">
<p id="text"></p>
<input type="text" id="captchaEdit" value="" />
<input type="submit" value="Отправить" onClick="checkCaptcha();" />
</div>
<ul id="test">
<li class="question">
Что из перечисленного не является операцией сравнения?
<ul>
<li><label><input type="checkbox" data-true>a = b</label></li>
<li><label><input type="checkbox">a != b</label></li>
<li><label><input type="checkbox" data-true>a ==== b</label></li>
</ul>
</li>
<li class="question">
<p>вопрос 1?</p>
<ul>
<li><label><input data-right="ответ 1"></label></li>
</ul>
</li>
<li class="question">
<p>вопрос 2?</p>
<ul>
<li><label><input data-right="ответ 2"></label></li>
</ul>
</li>
<li class="question">
Как выглядит однострочный комментарий в JS?
<ul>
<li><label><input type="radio" name="question1" data-true>//</label></li>
<li><label><input type="radio" name="question1">/**/</label></li>
<li><label><input type="radio" name="question1">< !-- --></label></li>
</ul>
</li>
<li class="question">
Что получится, если сложить true + false?
<ul>
<li><label><input type="radio" name="question2">NaN</label></li>
<li><label><input type="radio" name="question2">0</label></li>
<li><label><input type="radio" name="question2" data-true>1</label></li>
</ul>
</li>
<li class="question">
Выберите то, что является типом данных в JS
<ul>
<li><label><input type="checkbox" data-true>object</label></li>
<li><label><input type="checkbox">num</label></li>
<li><label><input type="checkbox" data-true>null</label></li>
</ul>
</li>
<input type="button" id="next" value="Следующий вопрос">
<input type="button" id="check" value="Проверить">
</ul>
<script>
var checkEl = document.getElementById('check');
var nextEl = document.getElementById('next');
var questionsEl = document.getElementsByClassName('question');
var result = [];
var now = 0;
nextEl.addEventListener('click', next);
checkEl.addEventListener('click', checkAnswers);
var c;
function captcha(){
let a = Math.ceil(Math.random() * 10)
let b = Math.ceil(Math.random() * 10)
c = a + b
document.getElementById('text').innerHTML='Сколько будет ' + a + ' + ' + b + '?';
}
function checkCaptcha(){
d = document.getElementById('captchaEdit').value;
if(d == c) {
alert('Правильный ответ!');
document.getElementById('icapt').style.display = 'none'
document.getElementById('test').style.display = 'block'
showAnswer();
now++;
}
else {
alert('Неправильный ответ, попробуйте еще раз.')
captcha()
}
}
function next() {
showAnswer();
now++
if (!questionsEl[now]) {
nextEl.style.display = 'none';
checkEl.style.display = 'block';
}
}
function showAnswer() {
for (var i = 0; i < questionsEl.length; i++) {
questionsEl[i].style.display = 'none';
}
questionsEl[now].style.display = 'block';
}
function checkAnswers() {
for (var i = 0; i < questionsEl.length; i++) {
var answers = questionsEl[i].querySelectorAll('input[type=checkbox], input[type=radio], input[type=text]');
result.push( checkOneAnswer(answers) );
}
printResult();
result = [];
}
function checkOneAnswer(answers) {
var result = null;
var noAnswer = true;
for (var i = 0; i < answers.length; i++) {
var isTrue = (answers[i].getAttribute('data-true') !== null);
if (answers[i].checked) {
noAnswer = false;
if (isTrue) {
result = true;
} else {
result = false;
}
} else {
if (isTrue) {
result = false;
}
}
}
if (noAnswer) {
result = null;
}
return result;
}
function printResult() {
var trueAnswers = 0;
var falseAnswers = 0;
var noAnswers = 0;
for (var i = 0; i < result.length; i++) {
if (result[i] === true) {
trueAnswers++;
} else if (result[i] === false) {
falseAnswers++;
} else if (result[i] === null) {
noAnswers++;
}
}
var all = trueAnswers + falseAnswers + noAnswers;
var percent = Math.round((trueAnswers/all) * 100);
var msg = 'Правильных ответов: ' + trueAnswers + ' (' + percent + '%)\n'
+ 'Неправильных ответов: ' + falseAnswers + '\n'
+ 'Без ответов: ' + noAnswers + '\n';
alert(msg);
}
captcha();
</script>
</body>
</html>
|
рони, код не смотрит вообще на текстовые инпуты, не проверяет их и не учитывает, лишь только пишет, что не ответили на них, хоть и ответы были выбраны
|
Цитата:
|
рони, исправила на data-true, не работает. Извиняюсь, но, возможно, это тупо, но я не понимаю, что исправить, ничего не помогает)
|
Alena_03,
каптча формируемая на клиенте также бессмысленна как тест с подсказками, следовательно можно все упросить. Использование data атрибута в то время когда у полей уже есть value, которое и может содержать признак верного ответа, это усложнить с непонятной целью. Указывайте значение равное 1 для верного ответа и 0 для неверного. Проверка, это сравнение суммы выбранных полей с указанным значением для вопроса (группы полей). |
laimas, с моим вариантом уже ничего не сделать значит?.. :( жаль, так долго делала. Не понимаю, как написать, уже 5-ый день мучаюсь, если не сложно, то прошу отредачить мой код, либо прикрепить свой. Опять же, если есть время, буду благодарна
|
| Часовой пояс GMT +3, время: 23:33. |