Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Создание нового типа инпута в тесте (https://javascript.ru/forum/misc/81071-sozdanie-novogo-tipa-inputa-v-teste.html)

Alena_03 25.09.2020 18:06
Создание нового типа инпута в тесте
 
Всем привет, задание: написать тест с тремя видами инпутов (радио, чекбокс, ввод ответа текстом). Так вот, не получается сделать инпут текстом, прошу помощи,и еще нужно проверить правильность введённого, с переводом в один регистр. Мой код:
<!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>

рони 25.09.2020 18:27
Alena_03,
строка 141 уберите
Цитата:
Сообщение от Alena_03
, input[type=]

Alena_03 25.09.2020 18:29
рони, всё равно не работает, убрала, есть еще вариант, но тоже не работает: 
<!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>

рони 25.09.2020 18:33
Цитата:
Сообщение от Alena_03
всё равно не работает,
у меня работает. атрибут run в тег форматирования добавьте.
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Alena_03 25.09.2020 18:37
рони, 

<!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>

Alena_03 25.09.2020 18:39
рони, код не смотрит вообще на текстовые инпуты, не проверяет их и не учитывает, лишь только пишет, что не ответили на них, хоть и ответы были выбраны

рони 25.09.2020 18:47
Цитата:
Сообщение от Alena_03
не проверяет их и не учитывает, л
нет проверки data-right

Alena_03 25.09.2020 18:52
рони, исправила на data-true, не работает. Извиняюсь, но, возможно, это тупо, но я не понимаю, что исправить, ничего не помогает)

laimas 25.09.2020 19:52
Alena_03,
каптча формируемая на клиенте также бессмысленна как тест с подсказками, следовательно можно все упросить. Использование data атрибута в то время когда у полей уже есть value, которое и может содержать признак верного ответа, это усложнить с непонятной целью. Указывайте значение равное 1 для верного ответа и 0 для неверного. Проверка, это сравнение суммы выбранных полей с указанным значением для вопроса (группы полей).

Alena_03 25.09.2020 20:00
laimas, с моим вариантом уже ничего не сделать значит?.. :( жаль, так долго делала. Не понимаю, как написать, уже 5-ый день мучаюсь, если не сложно, то прошу отредачить мой код, либо прикрепить свой. Опять же, если есть время, буду благодарна

laimas 25.09.2020 20:21
Цитата:
Сообщение от Alena_03
с моим вариантом уже ничего не сделать значит?
Можно, ну это как заставить рожать самцов, когда природой это определено самкам. :)

Пусть элементы ответа на вопрос содержаться в элементе fieldset, который и содержит в атрибуте data-check значение равное сумме всех полей с верным ответом. Если поля, это радио кнопки, значит это будет 1, если флажки, то от 1 до ... Поля с верным выбором, это value=1, с неверным, это value=0.

Проверить, это обход коллекции fieldset (или только у текущей fieldset, если проверка инициализируется для конкретного вопроса), у которого берутся ее поля, и суммируются их значения, с последующей проверкой значения data-check fieldset. Ответом может может быть - неверно или N правильных ответов (сумма полей) из M (значение data-check).

То есть, это одна и та же операция для всех вопросов не зависимо от типа полей. Получить сумму полей, это обойти их циклом или в современных браузерах с поддержкой "вся", это [...fields].reduce().

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

рони 25.09.2020 20:28
Alena_03,
type="text" не забывайте указывать и смотрите код, функция checkOneAnswer изменена.
<!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-true="ответ 1" type="text"></label></li>
    </ul>
</li>
<li class="question">
        <p>вопрос 2?</p>
        <ul>
        <li><label><input data-true="ответ 2"  type="text"></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 = 0;
    var {length} = [...answers].filter( a => a.checked);
    for (var i = 0; i < answers.length; i++) {
    var answer = answers[i];
    var text = answer.type == 'text';
    if(text) {
    var val = answer.value.trim();
    if(!val) return null;
    var data = answer.dataset.true;
    result += data === val;
    }
    else {
    if(!length) return null;
    result += answer.checked == answer.hasAttribute('data-true');
    }}
    return result == answers.length ? true : !result ? null : false;
}
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 25.09.2020 20:32
рони, увы, но так и засчитывает, будто бы пропустили эти вопросы просто... так странно

рони 25.09.2020 21:08
Alena_03,
исправил, смотрите код снова #12.

Alena_03 25.09.2020 21:12
рони, у меня просто нет слов, чтобы описать благодарность, работает) спасибо огромное вам. Могу узнать какие строки редачили?

Alena_03 25.09.2020 21:13
laimas, вам тоже спасибо огромное

рони 25.09.2020 21:21
Цитата:
Сообщение от Alena_03
Могу узнать какие строки редачили?
строка 125 , было nodeType вместо type.

Alena_03 25.09.2020 21:30
рони, спасибо ещё раз)


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