html - JavaScript game - score on a separate page -
i creating matching game in javascript (matching correct animals names animal prints) , stuck on 1 last bit..
i want score, can see being added go along, appear on different webpage. how go doing this, when remove 'score' div html page corrupts.
any appreciated.
heres 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"}, {text: "what animal 1 please?", img: "animalprints/4.jpg", answers: ["tiger", "parrot", "snake"], ans: "1"}, {text: "what animal 1 please?", img: "animalprints/5.jpg", answers: ["bumblebee", "tiger", "lady bird"], ans: "2"}, {text: "what animal 1 please?", img: "animalprints/6.jpg", answers: ["peacock", "cow", "zebra"], ans: "2"}, {text: "what animal 1 please?", img: "animalprints/7.jpg", answers: ["snake", "ladybird", "pig"], ans: "0"}, {text: "what animal 1 please?", img: "animalprints/8.jpg", answers: ["cat", "bat", "peacock"], ans: "2"}, {text: "what animal 1 please?", img: "animalprints/9.jpg", answers: ["cow", "horse", "parrot"], ans: "2"}, {text: "what animal 1 please?", img: "animalprints/10.jpg", answers: ["bumblebee", "tiger", "lady bird"], ans: "0"} ]; 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>
css
body { background-position: center; background-color:lime; } #questiontext { width: 300px; background: white; font-family:verdana; border-radius: 5px; margin-left:150px; } #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; } #animalprint{ margin-left:230px; margin-top: 40px; } #display { width:150px; height:50px; background-color:blue; color:white; border-radius:5px; font-family:aqua; } #alloptions { margin-left:180px; padding:30px; }
if want pass variable web page, need server.
that server can in technology (node, php, ...) , pass variable, can use post request, ajax, websocket ...
Comments
Post a Comment