javascript - Java script game - adding more questions -
i trying make matching game in java script, match correct animal print animal. have 3 questions in game far , when try add more, game not show questions..
if in anyway great.
here code..
<html> <head> <script> function randsort (a,b) {return math.random() - 0.5} var questions = [ {text: " animal this?", img: "animalprints/1.jpg", answers: ["cheetah", "tiger", "ladybird"], ans: "0"}, {text: " animal one?", img: "animalprints/2.jpg", answers: ["elephant", "giraffe", "snake"], ans: "1"}, {text: "what animal 1 please?", img: "animalprints/3.jpg", answers: ["bumblebee", "tiger", "lady bird"], ans: "2"} /////**part added**/// {text: "what animal 1 please?", img: "animalprints/4.jpg", answers: ["giraffe", "butterfly", "monkey"], ans: "2"} ]; var correctcount = 0; var currentq = 0; function select(nr) { if (nr == questions[currentq].ans) { correctcount++; document.getelementbyid('display').innerhtml= "you win" } else { document.getelementbyid('display').innerhtml= "you lose" } document.getelementbyid('display').innerhtml += "<p>score: "+ correctcount; // if last 1 nextq(); } function showq() { document.getelementbyid('questiontext').innerhtml = questions[currentq].text; document.getelementbyid('animalprint').src = questions[currentq].img; newhtml = ""; (var = 0; i< questions[currentq].answers.length; i++) { newhtml+= "<button onclick = 'select(" + + ")'>"+ questions[currentq].answers[i] + "</button>"; } document.getelementbyid('alloptions').innerhtml = newhtml; } function nextq(){ if (currentq < questions.length-1) { currentq++; showq(); } } window.onload =init; function init() { correctcount = 0; questions.sort(randsort); currentq = 0; showq(); } </script> <title> game_page</title> <link rel="stylesheet" type="text/css" href ="gamepage_css.css"> <script type = "text/javascript"> /* document.write("<img src = \ "" + math.floor 1 + math.random() * 10) + ".jpg\" />"); document.write("<img src = \"" + math.floor 1 + math.random() * ) */ </script> </head> <body> <div id = main> <div id = "questiontext"> testing</div> <div id ="animal"> <img id = "animalprint" src = "animalprints/1.jpg"> </div> <div id = "alloptions"> </div> <button id = "nextbutton" onclick = "nextq();"> </button></a> </div> <div id = "display"> score: </div> </body> </html>
and css
body { background-position: center; background-color:lime; } #questiontext {width: 350px; background: white;} #nextbutton { background-image: url(buttons/nextbutton.jpg); background-size:contain; background-repeat:repeat-y; background-position: center; width:100px; height:44px; margin-left: 250px; border-radius:10px; } #main { margin-top:200px; margin-left:250px; border:1px solid red; width:600px; } #display { width:150px; height:50px; background-color:blue; color:white; border-radius:5px; font-family:aqua; }
i tried change answers , works me
var questions = [ {text: " animal this?", img: "animalprints/1.jpg", answers: ["cheetah", "tiger", "ladybird"], ans: "0"}, {text: " animal one?", img: "animalprints/2.jpg", answers: ["elephant", "giraffe", "snake"], ans: "1"}, {text: "what animal 1 please?", img: "animalprints/3.jpg", answers: ["bumblebee", "tiger", "lady bird"], ans: "2"}, {text: "test question?", img: "animalprints/3.jpg", answers: ["answer 1", "answer 2", "answer 3"], ans: "2"} ];
Comments
Post a Comment