0

При нажатии на кнопку "результат" необходимо, чтобы появлялся новый блок 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" onclick="prom1()">Вопрос 1</button> 
<br> 
<button id="2" onclick="prom2()">Вопрос 2</button> 
<br> 
<button id="3" onclick="prom3()">Вопрос 3</button> 
<br> 
<button id="4" onclick="prom4()">Вопрос 4</button> 
<br> 
<button id="5" onclick="prom5()">Вопрос 5</button> 
  <br> 
</body>  
</html>

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

1
  • Где кнопка "Результат" и где должен появляться новый div? И если всё нужно на JS, то может быть создать объект/класс для вопросов/ответов?
    – XelaNimed
    22 мая в 11:23

1 ответ 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" onclick="prom1()">Ответить</button>
        </div>
        <div>
            <b>Вопрос 2. На территории Шотландии официальными считаются английский, англо-шотландский и шотландский ...
                языки.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit2" /><button id="btn2" onclick="prom2()">Ответить</button>
        </div>
        <div>
            <b>Вопрос 3. Какой город является столицей Шотландии?</b>
            <br>Введите слово
            <br><input id="edit3" /><button id="btn3" onclick="prom3()">Ответить</button>
        </div>
        <div>
            <b>Вопрос 4. Порядок слов в кельтских языках: сказуемое, ... , дополнение.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit4" /><button id="btn4" onclick="prom4()">Ответить</button>
        </div>
        <div>
            <b>Вопрос 5. В шотландском языке ... гласных, чем в английском.</b>
            <br>Введите пропущенное слово.
            <br><input id="edit5" /><button id="btn5" onclick="prom5()">Ответить</button>
        </div>
        <div id="resultBox">
            <br><button onclick="GetResult()">Результат</button>
        </div>
    </body>
    
    </html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.