Jaela Jaela - 1 month ago 4
Javascript Question

Javascript function - array of image and array of answer with input type

Please help me. I need to make a question game using random image array and its answer when the user input the correct answer.

<! 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>


THIS IS MY SCRIPT

<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>


I badly need your help please help me. I've tried many ways but I still don't know. the main objective of the game is that the image is display with the input box where the user needs to answer it correctly and add a score and go to another random image. So I need to use a random image array and the array of answer of that image when the user input the right answer the score add 1. Please someone help me. I badly need your help. Please. Thank you in advance. God Bless!

Answer

Since you haven't really said what your specific problem is (you should have, as mentioned in http://stackoverflow.com/help), I'll try to provide some help without actually solving the problem.

There are a number of issues with your code, including (but likely not limited to)

  • submitting a form for each answer - this reloads the page and erases any state/progress information you have.
  • a huge amount of redundant/repeated code.
  • variable names that save you far less time in typing now, than longer ones will save you when you (or someone else) reviews the code in the future.
  • separating related info into 2 arrays - without reading the code, it's not immediately clear (though one can guess) that they're related.
  • a timer handler that appears to rely on a non-existent variable (pause)

Something else to consider, is your method of pausing the game - by setting a variable to true or false. This is perfectly fine and functional, however - it comes with the drawback of leaving the timer running, dutifully firing once per second. It also requires you to check the state of the flag each and every time the handler is called. If you keep the result of SetInterval, you can use it in a call to ClearInterval - this will stop the timer, pausing the game and reducing energy usage. Naturally, you'll have to add extra code to monkey-around with the timer, should you decide upon such an approach.

Here's some code that aims to address each of the issues above in the bullet list (I don't bother with adding and implementing the ability to pause):

var currentAnswerIndex;
var currentScore=0;

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

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

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

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

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

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

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

function checkAnswer()
{
	var usersAnswer = byId('questionAnswer').value;
	if (answerObjs[currentAnswerIndex].answer == usersAnswer)
	{
		currentScore++;
		byId('currentScore').textContent = currentScore;
		randomizeQuestion();
	}
	else
	{
	}
	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)

Comments