Alert HElpppppp meeeeeeeeeee (Code is attached)

Comrades, help me, do not understand.
How do I make answer options. The bottom line is that the code I have stupidly linear, that is, it does not matter whether I entered the text correctly or incorrectly, all the same when you press the button, one algorithm will act. How do I make an option so that if the data is entered incorrectly there is another option of the algorithm, that is “else”. And the I have the picture switches in case any case, and me need to, to emerged different in case the right, and in another - the wrong. I appeal to you, gentlemen hackers

<html>
<head><title>Тест</title>
<script type="text/javascript" src="data/data.js"></script>
<style>
p, span, input {
 font-size:24px;
}
button{
    font-size:18px;
}
#vo {
    color:green;
}
#nvo {
    color:red;
}
#ot {
    color:blue;
}
</style>
</head>
<body style= "background-image: url(1.jpg);">
<div style="margin-left: auto;margin-right: auto;width: 600px;text-align:center;">
<p>Тест. Тема. <span id="tema"></span>.</p>
<div id="vopros1" style="display:block;">
<p>Вопрос 1</p>
<p><span id="v_1"></span> <input type="text" id="z_1"></p>
</div>
<div id="vopros2" style="display:none;">
<p>Вопрос 2</p>
<p><span id="v_2"></span> <input type="text" id="z_2"></p>
</div>
<div id="vopros3" style="display:none;">
<p>Вопрос 3</p>
<p><span id="v_3"></span> <input type="text" id="z_3"></p>
</div>
<button id="kn_sl" onclick="sled_vopr();">Следующий вопрос</button>
<button id="kn_pr" style="display:none;" onclick="proverit();">Проверить</button>
<div id="rezultat"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('v_1').innerHTML = vopros_1;
    document.getElementById('v_2').innerHTML = vopros_2;
    document.getElementById('v_3').innerHTML = vopros_3;
    document.getElementById('tema').innerHTML = test;
});
function sled_vopr(){
    if(document.getElementById('vopros2').style.display == "block"){
        document.getElementById('vopros2').style.display = "none";
        document.getElementById('vopros3').style.display = "block";
        document.getElementById('kn_sl').style.display = "none";
        document.getElementById('kn_pr').style.display = "block";
        document.body.style.backgroundImage = 'url(1.jpg)';
    }
    if(document.getElementById('vopros1').style.display == "block"){
        document.getElementById('vopros1').style.display = "none";
        document.getElementById('vopros2').style.display = "block";
        document.body.style.backgroundImage = 'url(0.jpg)';
    }
}
function proverit(){
otv_uch_1 = document.getElementById('z_1').value;
otv_ucgenika_1 = otv_uch_1;
otv_uch_1 = kodirov(otv_uch_1);
otv_uch_2 = document.getElementById('z_2').value;
otv_ucgenika_2 = otv_uch_2;
otv_uch_2 = kodirov(otv_uch_2);
otv_uch_3 = document.getElementById('z_3').value;
otv_ucgenika_3 = otv_uch_3;
otv_uch_3 = kodirov(otv_uch_3);
ball = 0;
document.getElementById('vopros3').style.display = "none";
document.getElementById('kn_pr').style.display = "none";
if(otv_uch_1 == pr_otv_zadachi_1){
    ball +=1;
    otveti = "<span id='vo'>Вопрос 1. Вы ответили верно. Ваш ответ: "+otv_ucgenika_1+"</span>";
    
} else {
    otveti = "<span id='nvo'>Вопрос 1. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_1+"</span>"; 
}
if(otv_uch_2 == pr_otv_zadachi_2){
    ball +=1;
    otveti += "<br><span id='vo'>Вопрос 2. Вы ответили верно. Ваш ответ: "+otv_ucgenika_2+"</span>";
} else {
    otveti += "<br><span id='nvo'>Вопрос 2. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_2+"</span>"; 
}
if(otv_uch_3 == pr_otv_zadachi_3){
    ball +=1;
    otveti += "<br><span id='vo'>Вопрос 3. Вы ответили верно. Ваш ответ: "+otv_ucgenika_3+"</span>";
} else {
    otveti += "<br><span id='nvo'>Вопрос 3. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_3+"</span>";
}
vsego_zadach = 3;
procent_vip = ball/vsego_zadach * 100;
procent_vip = procent_vip.toFixed();
document.getElementById('rezultat').innerHTML = "<span id='ot'>Задания выполнены верно на "+procent_vip+"%.</span><br><br>"+otveti;
}
function kodirov(stroka) { 
    var b64ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg'+ 
                   'hijklmnopqrstuvwxyz0123456789+/='; 
    var b64enc = ''; 
    var ch1, ch2, ch3; 
    var en1, en2, en3, en4; 
    for (var i=0; i<stroka.length;) { 
        ch1 = stroka.charCodeAt(i++); 
        ch2 = stroka.charCodeAt(i++); 
        ch3 = stroka.charCodeAt(i++); 
        en1 = ch1 >> 2; 
        en2 = ((ch1 & 3) << 4) | (ch2 >> 4); 
        en3 = isNaN(ch2) ? 64:(((ch2 & 15) << 2) | (ch3 >> 6)); 
        en4 = isNaN(ch3) ? 64:(ch3 & 63); 
        b64enc += b64ch.charAt(en1) + b64ch.charAt(en2) + 
                      b64ch.charAt(en3) + b64ch.charAt(en4); 
    } 
    return b64enc; 
} 
</script>
</body>
</html>
1 Like

Welcome @gorenech on the forums

So do you want to make an input such as a datalist ?

<input list="items" name="itemsInput">
<datalist id="items">
  <option value="apple">
  <option value="cherry">
  <option value="orange">
  <option value="banana">
</datalist>

but when something is entered wrong it would show you some that are correct?

in sled_vopr I have spelled out that when you click on the button I have something removed and something appears with the picture in the background. How do I make it so that in case of incorrect input I changed another picture, and in case of correct, also different

ok I understand so you want to change the background when a question is correct/incorrect.
But what are the questions and why do you encode the inputs?

I need to change the picture depending on the user input.

So the “kodirov” function’s returned string will be the URL for the image?

I don’t understand. kodirov is needed in order to encode the answers to the questions that are written in the code. It is necessary, for example, when entering data, the background changed (background)and while there was a variant of correct input and incorrect. depending on this, the picture will change.

So the picture changes when:

  1. entering data
  2. correct answers
  3. incorrect answers

And there would be a list of correct answers and incorrect answers encoded and it would check which question belongs to the certainly needed answer?


I think i understand that you have 3 inputs because you are checking each input differently which is going to get displayed.

// I changed the IDs to help me
if (document.getElementById('question2').style.display == "block") {
    document.getElementById('question2').style.display = "none";
    document.getElementById('question3').style.display = "block";
    document.getElementById('kn_sl').style.display = "none";
    document.getElementById('kn_pr').style.display = "block";
    document.body.style.backgroundImage = 'url(0.jpg)';
  }
  if (document.getElementById('question1').style.display == "block") {
    document.getElementById('question1').style.display = "none";
    document.getElementById('question2').style.display = "block";
    document.body.style.backgroundImage = 'url(1.jpg)';
  }

And I understand that you are doing this with this two ifs (above) but why are you setting the background in this case? Would you also change the background when each question is anwered?