Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Капча, активация начала теста (https://javascript.ru/forum/misc/81044-kapcha-aktivaciya-nachala-testa.html)

Alena_03 20.09.2020 09:42

Капча, активация начала теста
 
Всем привет, нужно написать код, сначала выводится капча, при правильном ответе должен начаться тест, а у меня либо тест там же, где и капча, либо они вообще независимы друг от друга, т.е нужно активировать кнопку, видимо, чтобы начать тест, помогите исправить, буду благодарна.
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Тест 2</title>
<meta charset="utf-8">
<style>
#check {
display: none;
}
</style>
</head>
<body> 
    <p id="text"></p>
    <input type="text" id="captchaEdit" value="" />
    <input type="submit" value="Отправить" onClick="checkCaptcha();" />
    <script type="text/javascript">
        a = Math.ceil(Math.random() * 10)
        b = Math.ceil(Math.random() * 10)
        c = a + b
        function captcha(){
            document.getElementById('text').innerHTML='Сколько будет ' + a + ' + ' + b + '?';
        }
        captcha()
        function checkCaptcha(){
            d = document.getElementById('captchaEdit').value;
             if(d == c) {
                alert('Правильный ответ!');
                
            }
            else {
                alert('Неправильный ответ, попробуйте еще раз.')
            }
        }
    </script>  

<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">
Что делает Math.round ?
<ul>
<li><label><input type="checkbox">Округление вниз</label></li>
<li><label><input type="checkbox">Огругление вверх</label></li>
<li><label><input type="checkbox" data-true>Окргуление до ближайшего целого</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>
<li class="question">
Какой оператор имеет самый высокий приоритет?
<ul>
<li><label><input type="checkbox" data-true>Группировка</label></li>
<li><label><input type="checkbox">Равенство</label></li>
<li><label><input type="checkbox">Логика</label></li>
</ul>
</li>
<li class="question">
Каков резульат 19 % 5 ?
<ul>
<li><label><input type="checkbox">3</label></li>
<li><label><input type="checkbox" data-true>4</label></li>
<li><label><input type="checkbox">19</label></li>
</ul>
</li>
<li class="question">
Cуществует ли метод toGMTString ?
<ul>
<li><label><input type="checkbox" data-true>Да</label></li>
<li><label><input type="checkbox">Нет</label></li>
<li><label><input type="checkbox">Не знаю</label></li>
</ul>
</li>
<li class="question">
Каково назначение оператора typeof ?
<ul>
<li><label><input type="checkbox">Выполняет численное преобразование</label></li>
<li><label><input type="checkbox">Преобразует тип</label></li>
<li><label><input type="checkbox" data-true>Возвращает тип аргумента</label></li>
</ul>
</li>
<li class="question">
Выберите, какие из данных функций действительно существуют в JS?
<ul>
<li><label><input type="checkbox" data-true>Function Expression</label></li>
<li><label><input type="checkbox" data-true>Function Declaration</label></li>
<li><label><input type="checkbox">Functtion Arrownation</label></li>
</ul>
</li>
<li class="question">
Какие типы переменных действительно существуют в JS?
<ul>
<li><label><input type="checkbox" data-true>let</label></li>
<li><label><input type="checkbox" data-true>var</label></li>
<li><label><input type="checkbox" data-true>const</label></li>
</ul>
</li>
<li class="question">
Сколько всего типов данных есть в JS?
<ul>
<li><label><input type="checkbox" data-true>8</label></li>
<li><label><input type="checkbox">10</label></li>
<li><label><input type="checkbox">7</label></li>
</ul>
</li>
</ul>
<input type="button" id="next" value="Следующий вопрос">
<input type="button" id="check" value="Проверить">
<script>
var checkEl = document.getElementById('check');
var nextEl = document.getElementById('next');
var questionsEl = document.getElementsByClassName('question');
var result = [];
var now = 0;
showAnswer();
now++;
nextEl.addEventListener('click', next);
checkEl.addEventListener('click', checkAnswers);
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]');
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);
}
</script>
</body>
</html>

voraa 20.09.2020 11:03

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Тест 2</title>
<meta charset="utf-8">
<style>
#check {
display: none;
}

#test {
display: none;
}
</style>
</head>
<body>

<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">
		Что делает Math.round ?
		<ul>
			<li><label><input type="checkbox">Округление вниз</label></li>
			<li><label><input type="checkbox">Огругление вверх</label></li>
			<li><label><input type="checkbox" data-true>Окргуление до ближайшего целого</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>
	<li class="question">
		Какой оператор имеет самый высокий приоритет?
		<ul>
			<li><label><input type="checkbox" data-true>Группировка</label></li>
			<li><label><input type="checkbox">Равенство</label></li>
			<li><label><input type="checkbox">Логика</label></li>
		</ul>
	</li>
	<li class="question">
		Каков резульат 19 % 5 ?
		<ul>
			<li><label><input type="checkbox">3</label></li>
			<li><label><input type="checkbox" data-true>4</label></li>
			<li><label><input type="checkbox">19</label></li>
		</ul>
	</li>
	<li class="question">
		Cуществует ли метод toGMTString ?
		<ul>
			<li><label><input type="checkbox" data-true>Да</label></li>
			<li><label><input type="checkbox">Нет</label></li>
			<li><label><input type="checkbox">Не знаю</label></li>
		</ul>
	</li>
	<li class="question">
		Каково назначение оператора typeof ?
		<ul>
			<li><label><input type="checkbox">Выполняет численное преобразование</label></li>
			<li><label><input type="checkbox">Преобразует тип</label></li>
			<li><label><input type="checkbox" data-true>Возвращает тип аргумента</label></li>
		</ul>
	</li>
	<li class="question">
		Выберите, какие из данных функций действительно существуют в JS?
		<ul>
			<li><label><input type="checkbox" data-true>Function Expression</label></li>
			<li><label><input type="checkbox" data-true>Function Declaration</label></li>
			<li><label><input type="checkbox">Functtion Arrownation</label></li>
		</ul>
	</li>
	<li class="question">
		Какие типы переменных действительно существуют в JS?
		<ul>
			<li><label><input type="checkbox" data-true>let</label></li>
			<li><label><input type="checkbox" data-true>var</label></li>
			<li><label><input type="checkbox" data-true>const</label></li>
		</ul>
	</li>
	<li class="question">
		Сколько всего типов данных есть в JS?
		<ul>
			<li><label><input type="checkbox" data-true>8</label></li>
			<li><label><input type="checkbox">10</label></li>
			<li><label><input type="checkbox">7</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]');
		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>


ЗЫ Вопросы часто какие то не самые понятные.

Тип данных, тип переменной....
Для меня тип переменной - это тип ее данных
Может
Какие виды переменных действительно существуют в JS?

Выберите, какие из данных функций действительно существуют в JS?
Ответы явно намекают на способы объявления функции. Сама сущность функции от этого не изменяется
Может
Выберите, какие способы объявлений функций существуют в JS?

Alena_03 20.09.2020 12:24

voraa, вопросы не мои, просто копипаст из задания, спасибо огромное вам


Часовой пояс GMT +3, время: 10:24.