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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -