Вывод результатов теста на JavaScript

Question

Вывод результатов теста на JavaScript

Рейтинг: 0Ответов: 1Опубликовано: 22.05.2023

При нажатии на кнопку "результат" необходимо, чтобы появлялся новый блок div, в котором содержалась следующая информация (примерно): "Количество верных ответов: prav Ваша оценка: "(в зависимости от prav по шкале От 0 до 1 правильных ответов - оценка "2" 2 правильных ответа - оценка "3" 3 правильных ответа - оценка "4" От 4 до 5 правильных ответов - оценка "5") Пока код имеет следующий вид:

<!DOCTYPE html> 
<html> 
<html lang='ru'> 
<meta charset="utf-8"> 
<head>  
<title> Script+function </title>
<script> 
let prav = 0; 
function prom1(){ 
    var otvet1 = prompt("Вопрос 1. Шотландия занимает ... часть Великобритании.","Введите пропущенное слово"); 
if(otvet1 == "северную"){ 
  prav = prav + 1 
} 
} 
function prom2(){ 
    var otvet2 = prompt("Вопрос 2. На территории Шотландии официальными считаются английский, англо-шотландский и шотландский ... языки.","Введите пропущенное слово"); 
if(otvet2 == "кельтский"){ 
  prav = prav + 1 
} 
} 
function prom3(){ 
    var otvet3 = prompt("Вопрос 3. Какой город является столицей Шотландии?","Введите слово"); 
if(otvet3 == "Эдинбург"){ 
  prav = prav + 1 
} 
} 
function prom4(){ 
    var otvet4 = prompt("Вопрос 4. Порядок слов в кельтских языках: сказуемое, ... , дополнение.","Введите пропущенное слово"); 
if(otvet4 == "подлежащее"){ 
  prav = prav + 1 
} 
} 
function prom5(){ 
    var otvet5 = prompt("Вопрос 5. В шотландском языке ... гласных, чем в английском.","Введите пропущенное слово"); 
if(otvet5 == "больше"){ 
  prav = prav + 1 
} 
} 
 
</script> 
</head> 
<body>    
<h1>  Тест на тему "Шотландия. Шотланский язык" </h1> 
<p>Данный тест направлен на проверку знаний, полученных на предыдущих страницах. Ваша задача - вписать ответ в окно</p> 
  <br>Правила выставления оценки: 
  <br>От 0 до 1 правильных ответов - оценка "2" 
  <br>2 правильных ответа - оценка "3" 
  <br>3 правильных ответа - оценка "4" 
  <br>От 4 до 5 правильных ответов - оценка "5" 
<p>Удачи в прохождении теста!</p> 
<button id="1">Вопрос 1</button> 
<br> 
<button id="2">Вопрос 2</button> 
<br> 
<button id="3">Вопрос 3</button> 
<br> 
<button id="4">Вопрос 4</button> 
<br> 
<button id="5">Вопрос 5</button> 
  <br> 
</body>  
</html>

Желательно более или менее простой способ именно на js

javascript html html5

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Расчет оценки реализовал через switch, а вывод результата в div с помощью document.getElementById("resultBox").innerHTML через ид div'а.

Также сами вопросы лучше отображать сразу а не через prompt и добавил при подтверждении ответа блокировку поля ввода.

    <!DOCTYPE html>
    <html>
    <html lang='ru'>
    <meta charset="utf-8">
    
    <head>
        <title> Script+function </title>
        <script>
            let prav = 0;
            function prom1() {
                if (document.getElementById("edit1").value == "северную")
                    prav++;
                document.getElementById("btn1").disabled = true;
                document.getElementById("edit1").disabled = true;
            }
            function prom2() {
                if (document.getElementById("edit2").value == "кельтский")
                    prav++;
                document.getElementById("btn2").disabled = true;
                document.getElementById("edit2").disabled = true;
            }
            function prom3() {
                if (document.getElementById("edit3").value == "Эдинбург")
                    prav++;
                document.getElementById("btn3").disabled = true;
                document.getElementById("edit3").disabled = true;
                console.log(prav)
            }
            function prom4() {
                if (document.getElementById("edit4").value == "подлежащее")
                    prav++;
                document.getElementById("btn4").disabled = true;
                document.getElementById("edit4").disabled = true;
            }
            function prom5() {
                if (document.getElementById("edit5").value == "больше")
                    prav++;
                document.getElementById("btn5").disabled = true;
                document.getElementById("edit5").disabled = true;
            }
            function GetResult() {
                var estimation = 0;
                switch (prav) {
                    case 0:
                    case 1:
                        estimation = 2;
                        break;
                    case 2:
                        estimation = 3;
                        break;
                    case 3:
                        estimation = 4;
                        break;
                    case 4:
                    case 5:
                        estimation = 5;
                        break;
                }
                document.getElementById("resultBox").innerHTML += "<br>Количество верных ответов: " + prav + " Ваша оценка: " + estimation;
            }
        </script>
    </head>
    
    <body>
        <h1> Тест на тему "Шотландия. Шотланский язык" </h1>
        <p>Данный тест направлен на проверку знаний, полученных на предыдущих страницах. Ваша задача - вписать ответ в окно
        </p>
        <p>Удачи в прохождении теста!</p>
    
        <div>
            <b>Вопрос 1. Шотландия занимает ... часть Великобритании.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit1" /><button id="btn1">Ответить</button>
        </div>
        <div>
            <b>Вопрос 2. На территории Шотландии официальными считаются английский, англо-шотландский и шотландский ...
                языки.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit2" /><button id="btn2">Ответить</button>
        </div>
        <div>
            <b>Вопрос 3. Какой город является столицей Шотландии?</b>
            <br>Введите слово
            <br><input id="edit3" /><button id="btn3">Ответить</button>
        </div>
        <div>
            <b>Вопрос 4. Порядок слов в кельтских языках: сказуемое, ... , дополнение.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit4" /><button id="btn4">Ответить</button>
        </div>
        <div>
            <b>Вопрос 5. В шотландском языке ... гласных, чем в английском.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit5" /><button id="btn5">Ответить</button>
        </div>
        <div id="resultBox">
            <br><button>Результат</button>
        </div>
    </body>
    
    </html>

Вывод результатов теста на JavaScript

Ответы