Функция JavaScript - массив изображения и массив ответа с типом ввода

Мне нужно задать вопрос, используя случайный массив изображений и его ответ, когда пользователь вводит правильный ответ.Функция JavaScript - массив изображения и массив ответа с типом ввода

<! DOCTYPE html> 
    <html> 
    <title> 
    Guess the CharToon 
</title> 
<head> 
     <LINK rel="stylesheet" type="text/css" href="F:\ANGELA\MM1\CHARTOON\CSS\samp.css">  
    <div id="timer" style="padding: 1%;background-color: white;border-radius: 1%;color: black;font-size: 30;font-family: aero; position: absolute;top: 75%;left: 85%;"></div> 




</head> 
<body> 

    <h1>From what movie this<br>&nbsp; place can be found?</h1>   
    <p id="count"></p> 
    <form> 

    <img id="pic" class="jpg" src="Nigel Uno.png"> 

    <input type="text" id="anss" class="type1" value="" ></input> 
<button class="type2" value="submit" onclick="sub()">Submit</button> 
</form> 
    <a class="back2" href="F:\ANGELA\MM1\CHARTOON\HTML\HARD3.html"><img src="F:\ANGELA\MM1\CHARTOON\IMAGES\MENU\back.png" width="150" height="150"></a> 

    </body> 
    <audio src="F:\ANGELA\MM1\CHARTOON\SOUNDS\Main.mp4" autoplay loop hidden>  </audio> 
    </html>

Это мой сценарий:

 <script> 
    var Imagearray = []; 
    Imagearray[0] = "Nigel Uno.png"; 
    Imagearray[1] = "perry.jpg"; 
    Imagearray[2] = "BOOTS.jpg"; 
    Imagearray[3] = "SPONGEBOB.jpg"; 


var a= Math.floor(Math.random()* Imagearray.length); 


var anw = []; 
anw[0] = "nigel"; 
anw[1] = "perry"; 
anw[2] = "boots"; 
anw[3] = "sponge"; 

var scor = 2; 
    function sub() 
{ 
var correct = 0; 
if (a == 0) 
{ 

var ans = document.getElementById('anss').value; 
if (ans == anw[a]) 
{ 

    a= Math.floor(Math.random() * Imagearray.length); 
    document.getElementById("pic").src = Imagearray[a]; 
    document.getElementById("anss").value = ""; 
    document.getElementById("count").innerHTML= scor + " " +"/5"; 
    correct == 1; 
    scor++; 

} 
else 
{ 
    if (correct == 0) 
    { 
     hideass++; 
    document.getElementById("anss").value = null; 

    } 
    if (ans == ""){ 
     hideass = 0; 
    } 


    } 




    } 

if (a == 1) 
{ 

var ans = document.getElementById('anss').value; 
if (ans == anw[a]) 
{ 

    a= Math.floor(Math.random() * Imagearray.length); 
    document.getElementById("pic").src = Imagearray[a]; 
    document.getElementById("anss").value = ""; 
    document.getElementById("count").innerHTML= scor + " " +"/5"; 
    correct = 1; 
    scor++; 


} 
else 
{ 
    if (correct == 0 ) 
    { 
     hideass++; 
     document.getElementById("anss").value = null; 
    } 
    if (ans == ""){ 
     hideass = 0; 
    } 
    } 



    } 
if (a == 2) 
{ 

var ans = document.getElementById('anss').value; 
if (ans == anw[a]) 
{ 

    a= Math.floor(Math.random() * Imagearray.length); 
    document.getElementById("pic").src = Imagearray[a]; 
    document.getElementById("anss").value = ""; 
    document.getElementById("count").innerHTML= scor + " " +"/5"; 
    correct = 1; 
    scor++; 


} 
else 
{ 
    if (correct == 0) 
    { 
     hideass++; 
     document.getElementById("anss").value = null; 
    } 
    if (ans == ""){ 
     hideass = 0; 
    } 
} 


    } 

    if (a == 3) 
{ 

var ans = document.getElementById('anss').value; 
if (ans == anw[a]) 
{ 

    a= Math.floor(Math.random() * Imagearray.length); 
    document.getElementById("pic").src = Imagearray[a]; 
    document.getElementById("anss").value = ""; 
    document.getElementById("count").innerHTML= scor + " " +"/5"; 
    correct = 1; 
    scor++; 


} 
else 
{ 
    if (correct == 0) 
    { 
     hideass++; 
     document.getElementById("anss").value = null; 

    } 
    if (ans == ""){ 
     hideass = 0; 
    } 
    } 



    } 

    if (Imagearray.length == 3) 
{ 
window.location.innerHTML = ClearEasy(); 
} 


} 

    window.onload = function timerx(){ 
    var sec = 30; 
    setInterval(function(){ 
if (pause == 0) 
{ 
    document.getElementById("timer").innerHTML = sec + " " + "Seconds" ; 
sec--; 
} 
    if (sec < 0) {  
     sec = 0; 
     window.location.assign("Times_up_Easy1.html"); 
    sec = 30; 
    } 
    },1000); 
    } 

</script>

Я пробовал много способов, но я до сих пор не знаю. Основная цель игры заключается в том, что изображение отображается с полем ввода, где пользователю нужно правильно ответить на него, добавить оценку и перейти к другому случайному изображению. Поэтому мне нужно использовать случайный массив изображений и массив ответов этого изображения, когда пользователь вводит правильный ответ, добавьте счет 1.

источник

2016-10-05 Jaela

Поскольку вы на самом деле не сказали, какова ваша конкретная проблема (вы должны иметь, как указано в https://stackoverflow.com/help), я попытаюсь оказать некоторую помощь, не решив проблему.

Есть целый ряд вопросов, с кодом, в том числе (но, вероятно, не ограничиваясь ими)

подав форму для каждого ответа - это перезагружается страницы и стирает любое состояние информации/прогресс, которого вы иметь.
огромное количество избыточного/повторяющегося кода.
имена переменных, которые сохраняют гораздо меньше времени при вводе текста, чем более длинные. сохранит вас, когда вы (или кто-то еще) просмотрите код в будущем.
Отделяет связанную информацию с 2-мя массивами - не считывая код, это не немедленно очищается (хотя один может догадываться), что они связаны.
обработчик таймера, который появляется полагаться на несуществующей переменной (pause)

что-то еще, чтобы рассмотреть, это ваш метод приостановки игры - установив переменную истинным или ложным. Это прекрасно и функционально, однако - это связано с недостатком выхода из таймера, который покорно срабатывает один раз в секунду. Он также требует, чтобы вы проверяли состояние флага каждый раз при вызове обработчика. Если вы сохраните результат SetInterval, вы можете использовать его в вызове ClearInterval - это остановит таймер, приостановит игру и уменьшит потребление энергии. Естественно, вам придется добавить дополнительный код для обезьяны вокруг таймера, если вы решите такой подход.

Вот код, который направлен на решение каждого из вопросов выше в списке пули (я не беспокоить с добавлением и реализации возможности паузы):

var currentAnswerIndex; 
 
var currentScore=0; 
 

 
var answerObjs = 
 
[ 
 
\t { answer: "nigel", file: "Nigel Uno.png"}, 
 
\t { answer: "perry", file: "perry.jpg"}, 
 
\t { answer: "boots", file: "boots.jpg"}, 
 
\t { answer: "sponge", file: "spongebob.jpg"} 
 
]; 
 

 
function byId(id){return document.getElementById(id);} 
 

 
window.addEventListener('load', onDocLoaded, false); 
 

 
function onDocLoaded(evt) 
 
{ 
 
\t randomizeQuestion(); 
 
\t //initTimer(10); 
 
} 
 

 
function initTimer(secondsBeforeTimeout) 
 
{ 
 
\t var secondsRemaining = secondsBeforeTimeout; 
 
\t const msPerSecond = 1000; 
 
\t var timerId = setInterval(intervalHandler, 1*msPerSecond); 
 

 
\t function intervalHandler() 
 
\t { 
 
\t \t if (gameIsPaused == false) 
 
\t \t { 
 
\t \t \t document.getElementById("timer").innerHTML = secondsRemaining + " " + "Seconds" ; 
 
\t \t \t secondsRemaining--; 
 
\t \t } 
 
\t \t if (secondsRemaining < 0) 
 
\t \t {  
 
\t \t \t window.location.assign("Times_up_Easy1.html"); 
 
\t \t } 
 
\t } 
 
} 
 

 
function randomizeQuestion() 
 
{ 
 
\t currentAnswerIndex = Math.floor(Math.random() * answerObjs.length); 
 
\t byId('questionPic').src = answerObjs[currentAnswerIndex].file; 
 
\t // for debugging purposes 
 
\t console.log("Current answer is: " + answerObjs[currentAnswerIndex].answer); 
 
} 
 

 
function checkAnswer() 
 
{ 
 
\t var usersAnswer = byId('questionAnswer').value; 
 
\t if (answerObjs[currentAnswerIndex].answer == usersAnswer) 
 
\t { 
 
\t \t currentScore++; 
 
\t \t byId('currentScore').textContent = currentScore; 
 
\t \t randomizeQuestion(); 
 
\t } 
 
\t else 
 
\t { 
 
\t } 
 
\t byId('questionAnswer').value = ''; 
 
}

<h1>Which movie contains this location?</h1> 
 
<img id='questionPic'/><br> 
 
<input type='text' id='questionAnswer'/> 
 
<button id='checkAnsBtn' onclick='checkAnswer();'>Check Answer</button>(<span id='currentScore'>0</span>/5)

источник

2016-10-05 17:05:11 enhzflep

Вы благословение! Будьте здоровы! – Jaela

как я могу остановить счет и перейти к другому набору вопросов? без использования html? – Jaela

Ну, вы могли бы рассмотреть (сделав) текущий набор вопросов ('answerObjs') просто другим объектом в массиве' answerObjs'. После этого у вас есть два варианта: (0) переписать весь код, доступ к '.file' или' answer', чтобы тот факт, что они находятся в объекте, который является частью массива (как в настоящее время case), который сам по себе является элементом большего массива.или (1) при выборе набора вопросов, которые вы хотели бы использовать, вы можете скопировать этот набор в переменную, называемую 'answerObjs' (убедитесь, что вы переименовываете массив массива объектов в нечто иное) - это не изменит многое. – enhzflep

Функция JavaScript - массив изображения и массив ответа с типом ввода

ответ

Смежные вопросы