title: Javascript Can Push() and Pop() and Image Replacement Work within an Array
body: <p>Can Push() and Pop() and Image Replacement Work within an Array?</p>
  
  <p>8th Gr math teacher attempting to create a slide show of question images that <a href="https://alligator.io/js/push-pop-shift-unshift-array-methods/" rel="nofollow noreferrer">pop() and push()</a> through an image array based on student responses.  If the student answers correctly the question is popped, but if they answer incorrectly it is added to the end of the queue.  Additionally, since deleting elements in the DOM is <a href="https://stackoverflow.com/questions/8830839/javascript-dom-remove-element">bad</a>, I am replacing the current image's src and id with that of the next element in queue.  The array is then popped and pushed along, but whenever I enter in the incorrect answer twice the same image appears.</p>
  
  <p>I have moved the global variable that holds the array, domEls, inside of the function retrieveAnsForImage to force it to randomize the images in the array.  When I do this, the images change correctly so I believe it is the push() and pop() commands.  </p>
  
  <p>I included a snippet that doesn't work here, but works like a champ in Notepad ++.  I just took a crash course in Javascript, HTML and CSS last month on Codecademy, I am very new to this.  Thank you for reading.</p>
  
  <pre><code>//Jquery
  $(document).ready(function() {
      $(function() {
          $('img.card').on('contextmenu', function(e) {
              e.preventDefault();
              //alert(this.id);
              openPrompt(this.id);
          });
      });
  
  
  });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        //Provide and Shuffle array function
  function shuffleImgs() {
    var imgArr = [
          "image1",
          "image2",
          "image3",
          "image4",
          "image5",
          "image6",
          "image7",
          "image8",
          "image9"
      ];
  
      var currentIndex = imgArr.length, temporaryValue, randomIndex;
  
          // While there remain elements to shuffle...
      while (0 !== currentIndex) {
  
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;
  
          // And swap it with the current element.
          temporaryValue = imgArr[currentIndex];
          imgArr[currentIndex] = imgArr[randomIndex];
          imgArr[randomIndex] = temporaryValue;
      }
   alert("shuffle");
   return imgArr;
  }
  
  function arrStack() {
       
    var imgArr = shuffleImgs();
    
    //Map over the array to create Dom elements
          var domElements = imgArr.map(function (imgName, index) {
          var cardDiv = document.createElement('div');
    var cardImage = document.createElement('img');
  
          //Add img id and class
          cardImage.id = imgName;
          cardImage.classList.add('card');
  
          //Set img source
          cardImage.src = `images/${imgName}.jpg`;
    
    //Put it all together
    cardDiv.appendChild(cardImage);
  
          return cardDiv;
    });
          
    //this notation to call nested function for Global var stack         
    this.nDomElements = function () {
                  stackDomEl = domElements;
                  return stackDomEl;
          }
    
    //Display last element in array
    //this notation to call the nested function from outside the function
    this.nDisplayLastArr = function displayLastArr() {
                  var lastImgArr = domElements[domElements.length - 1];
      //alert(lastImgArr);
      
      //Append the elements to the DOM
      var modal = document.querySelector('div.modal');
      modal.appendChild(lastImgArr);
                  
      return lastImgArr; //Use brackets when your are returning more than one variable
                  } 
  }
  
      //Function called from Jquery to open prompt to answer question
  function openPrompt(imageId) {
      var userAns = prompt("Please enter your answer below and click OK");
  
      if (userAns == null || userAns == "") {
        alert("User cancelled the prompt.  Exit and please try again!");
      }
   
      else {
      /*Vain hope that I can pass imageId from click event through the user prompt
       to the answer checking function retrieveAnsForImage*/
  
      retrieveAnsForImage(imageId, userAns); //out of scope?
      }
  }
  
  //Global variable
  func = new arrStack();
  window.domEls = func.nDomElements();
  
  //Compare user responses with the question image by use of the click image id
  function retrieveAnsForImage(imageId, userAns) {
  
      //Change these variables to the correct answer whenever this website is reused in other assignments
      var ansImage1 = "1";
      var ansImage2 = "2";
      var ansImage3 = "3";
      var ansImage4 = "4";
      var ansImage5 = "5";
      var ansImage6 = "6";
      var ansImage7 = "7";
      var ansImage8 = "8";
      var ansImage9 = "9";
   
  
      //Give students a second chance to retry a question
      //var hintCounter = 0; //include a while statement above the if statements to allow students a retry
  
      /*Compare user response with correct case answer and correct clicked image.
      Students may enter the right answer for the wrong image hence the &amp;&amp;.
      Images will always be refered to as image1, image2, etc.*/
  
      if (userAns === ansImage1 &amp;&amp; imageId === "image1") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage2 &amp;&amp; imageId === "image2") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage3 &amp;&amp; imageId === "image3") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage4 &amp;&amp; imageId === "image4") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage5 &amp;&amp; imageId === "image5") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage6 &amp;&amp; imageId === "image6") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage7 &amp;&amp; imageId === "image7") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage8 &amp;&amp; imageId === "image8") {
          correctAns(imageId);
      }
  
      else if (userAns === ansImage9 &amp;&amp; imageId === "image9") {
          correctAns(imageId);
      }
      else {
          window.alert("Incorrect Answer");
          incorrectAns();
      }
      function correctAns(){
    //Second to last element in array
    var SecLastElArr = domEls[domEls.length - 2]; 
    //Pull image id from second to last element in array
    var nextImgId = SecLastElArr.querySelector("div &gt; img").id;
    //Pull image id from document
    var imgId = document.querySelector("div &gt; img").id; 
    
    //Student incorrect answer change im
    document.getElementById(imgId).src = `images/${nextImgId}.jpg`;
          document.getElementById(imgId).id = nextImgId;
    
    domEls.pop();
          //Think about when the array is completely gone
          //while domEls.length !== 0;
   }
      function incorrectAns(){
    
     //Last element in array
    var LastElArr = domEls[domEls.length - 1];
    //Second to last element in array
    var SecLastElArr = domEls[domEls.length - 2]; 
    //Pull image id from second to last element in array
    var nextImgId = SecLastElArr.querySelector("div &gt; img").id;
    //Pull image id from document
    var imgId = document.querySelector("div &gt; img").id; 
    
    //Student incorrect answer change image src and id to next element in queue
    document.getElementById(imgId).src = `images/${nextImgId}.jpg`;
          document.getElementById(imgId).id = nextImgId;
  
    //Remove last element in array
          domEls.pop();
          //move the last element to the first element in the array for another attempt
          domEls.push(LastElArr);
    
    alert(domEls.length);   
      }
   
  }
  function overlay() {
      var el = document.getElementById("overlay");
      el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#overlay {
       visibility: hidden;
       position: absolute;
       left: 0px;
       top: 0px;
       width:100%;
       height:100%;
       text-align:center;
       z-index: 1000;
    background-color: rgba(0,191, 255, 0.8);
  }
  
  #overlay div {
       width:70%;
       margin: 10% auto;
       background-color: #fff;
       border:1px solid #000;
       padding:15px;
       text-align: center;
  }
  
  body {
       height:100%;
       margin:0;
       padding:0;
  }
  
  #close-img {
    float: right;
    clear: right;
    width: 30px;
    height: 30px;
       bottom: 0;
    right: 0;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;&lt;/title&gt;
   &lt;span&gt; "Left click to view any questions. Right click (two finger tap) to answer the question and claim the tile.  Each player must claim 4 tiles to successfully complete the assignment."&lt;/span&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet"&gt;
   &lt;link rel="stylesheet" type="text/css" href="Stack Rnd Temp.css"&gt;--&gt;
   
   &lt;script type="text/javascript" src="Stack Rnd Temp.js"&gt;&lt;/script&gt;
   
   &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="StackRndTempjq.js"&gt;&lt;/script&gt;
   
    
  &lt;/head&gt; 
  &lt;body&gt;
  
  &lt;div class="title"&gt;
  &lt;h1&gt;&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div id="gameboard"&gt;  &lt;!--Container for all nine divs--&gt;
  
      &lt;a href='#' onclick='overlay()'&gt;Click here to show the overlay&lt;/a&gt;
   
   
  &lt;/div&gt;
  &lt;div class="modal" id="overlay"&gt;
          &lt;p&gt; "Right click to answer the question"&lt;/p&gt; 
   
       &lt;script&gt;
    func = new arrStack();
    func.nDisplayLastArr();
    &lt;/script&gt;
    
    &lt;img src="images/close.png" id="close-img" onclick="overlay()"&gt;
   
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>