Форум

blkvnkl · #1 (**permalink**) 03.11.2020, 18:56

Задача: если в поле вводится ответ с 1 ошибкой в цифре, то выводится частичное решение, если 2 ошибки и более, то ответ неверный, если все цифры совпадают, то ответ верный. НО почему-то код работает не совсем верно

<!DOCTYPE HTML>
<html>
<head>
<style>
.correct {
  background-color: #79ba6c;
  color: #000000;
}
.wrong {
  background-color: #ed9898;
  color: #000000;
}
.half
{
background-color:#f5b65d;
color:#000000;
}
</style>
<meta charset="UTF-8">
<script>
function rezultat1() {
 const user_answer = document.getElementById('otvet1').value;
 
 const correct_answer = '529736';
 
 let score = 0;
 
 for (let i = 0; i < correct_answer.length; i++) {
   if (correct_answer[i] == user_answer[i]) score++; //если символы двух строк совпадаем, увеличиваем score на 1
 }
 
 if (score == correct_answer.length) { //ответ полностью верный
   document.getElementById("itog1").innerHTML ='Ваш ответ ВЕРНЫЙ! Вы набрали 2 балла.';
    document.getElementById("otvet1").classList.remove("half");
    document.getElementById("otvet1").classList.remove("wrong");
    document.getElementById("otvet1").classList.add("correct");
 } else if (score > 0) { 
    document.getElementById("itog1").innerHTML = 'Ваш ответ ЧАСТИЧНО ВЕРНЫЙ! Правильный ответ: А-5 Б-2 В-9 Г-7 Д-3 Е-6. Вы набрали 1 балл.';
   document.getElementById("otvet1").classList.remove("correct");
   document.getElementById("otvet1").classList.remove("wrong");
   document.getElementById("otvet1").classList.add("half");
 } else { 
   document.getElementById("itog1").innerHTML = 'Ваш ответ НЕВЕРНЫЙ! Правильный ответ: А-5 Б-2 В-9 Г-7 Д-3 Е-6. Вы набрали 0 баллов.';
document.getElementById("otvet1").classList.remove("correct");
document.getElementById("otvet1").classList.remove("half");
document.getElementById("otvet1").classList.add("wrong");
 } 
}
</script>
</head>
<body>
<big><font size="5" face="Roboto">Ответ:<input type="text" id="otvet1" placeholder="Ваш ответ"></font></big>
<button onclick="rezultat1()"><font size="4" face="Roboto">Далее</font></button>
<p id="itog1"></p>
</body>
</html>

laimas · #2 (**permalink**) 03.11.2020, 19:29

if (correct_answer[i] == user_answer[i]) score++; - увеличивать наоборот, при несовпадении

if (!score) ... верный
else if(score==1) ... частично
else ... труба дело

и вынесите за условия document.getElementById("otvet1").classList ... и остальные, обрабатывая их один раз по условию (toggle)

PS. А еще лучше, это имена классов с добавлением результата по маске 3, это будет одна строка в коде. И сам результат вместо if записать короче:

document.getElementById("itog1").textContent = !score ? 'верно' : score==1 ? 'частично' : 'плохо';

В итоге все это заменится двумя строками кода.

Форум

Справочник

Discord чат

Курсы javascript