Javascriptは配列内でPush（）およびPop（）およびイメージ置換が可能です

Question

配列内でPush（）およびPop（）およびイメージ置換の作業を実行できますか？

生徒の反応に基づいて画像配列を使って質問画像のスライドショーを作成しようとしています。生徒が正しく答えた場合、質問はポップされますが、回答が間違っていると、キューの最後に追加されます。また、DOM内の要素を削除するのはbadなので、現在の画像のsrcとidをキュー内の次の要素のsrcとidに置き換えています。配列はポップされ、一緒にプッシュされますが、私が間違った答えを入力するたびに、同じ画像が2度表示されます。

配列の画像をランダムにするために、retrieveAnsForImage関数内で配列domElsを保持するグローバル変数を移動しました。私がこれをすると、画像が正しく変化するので、それはpush（）とpop（）コマンドと信じています。

ここでは機能しないスニペットが含まれていますが、メモ帳の++のように機能します。先月、CodecademyでJavascript、HTML、CSSのクラッシュコースを受講しました。これは非常に新しいものです。読んでくれてありがとう。

//Jquery 
$(document).ready(function() { 
    $(function() { 
     $('img.card').on('contextmenu', function(e) { 
      e.preventDefault(); 
      //alert(this.id); 
      openPrompt(this.id); 
     }); 
    }); 


}); 

 //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; 
 
    } 
 
\t alert("shuffle"); 
 
\t return imgArr; 
 
} 
 

 
function arrStack() { 
 
\t  
 
\t \t var imgArr = shuffleImgs(); 
 
\t \t 
 
\t \t //Map over the array to create Dom elements 
 
     var domElements = imgArr.map(function (imgName, index) { 
 
     var cardDiv = document.createElement('div'); 
 
\t \t 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`; 
 
\t \t 
 
\t \t //Put it all together 
 
\t \t cardDiv.appendChild(cardImage); 
 

 
     return cardDiv; 
 
\t \t }); 
 
     
 
\t \t //this notation to call nested function for Global var stack   
 
\t \t this.nDomElements = function() { 
 
       stackDomEl = domElements; 
 
       return stackDomEl; 
 
     } 
 
\t \t 
 
\t \t //Display last element in array 
 
\t \t //this notation to call the nested function from outside the function 
 
\t \t this.nDisplayLastArr = function displayLastArr() { 
 
       var lastImgArr = domElements[domElements.length - 1]; 
 
\t \t \t \t //alert(lastImgArr); 
 
\t \t \t \t 
 
\t \t \t \t //Append the elements to the DOM 
 
\t \t \t \t var modal = document.querySelector('div.modal'); 
 
\t \t \t \t modal.appendChild(lastImgArr); 
 
       
 
\t \t \t \t return lastImgArr; //Use brackets when your are returning more than one variable 
 
       } \t 
 
} 
 

 
    //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!"); 
 
    } 
 
\t 
 
    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"; 
 
\t 
 

 
    //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 &&. 
 
    Images will always be refered to as image1, image2, etc.*/ 
 

 
    if (userAns === ansImage1 && imageId === "image1") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage2 && imageId === "image2") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage3 && imageId === "image3") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage4 && imageId === "image4") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage5 && imageId === "image5") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage6 && imageId === "image6") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage7 && imageId === "image7") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage8 && imageId === "image8") { 
 
     correctAns(imageId); 
 
    } 
 

 
    else if (userAns === ansImage9 && imageId === "image9") { 
 
     correctAns(imageId); 
 
    } 
 
    else { 
 
     window.alert("Incorrect Answer"); 
 
     incorrectAns(); 
 
    } 
 
    function correctAns(){ 
 
\t \t //Second to last element in array 
 
\t \t var SecLastElArr = domEls[domEls.length - 2]; 
 
\t \t //Pull image id from second to last element in array 
 
\t \t var nextImgId = SecLastElArr.querySelector("div > img").id; 
 
\t \t //Pull image id from document 
 
\t \t var imgId = document.querySelector("div > img").id; 
 
\t \t 
 
\t \t //Student incorrect answer change im 
 
\t \t document.getElementById(imgId).src = `images/${nextImgId}.jpg`; 
 
     document.getElementById(imgId).id = nextImgId; 
 
\t \t 
 
\t \t domEls.pop(); 
 
     //Think about when the array is completely gone 
 
     //while domEls.length !== 0; 
 
\t } 
 
    function incorrectAns(){ 
 
\t \t 
 
    \t \t //Last element in array 
 
\t \t var LastElArr = domEls[domEls.length - 1]; 
 
\t \t //Second to last element in array 
 
\t \t var SecLastElArr = domEls[domEls.length - 2]; 
 
\t \t //Pull image id from second to last element in array 
 
\t \t var nextImgId = SecLastElArr.querySelector("div > img").id; 
 
\t \t //Pull image id from document 
 
\t \t var imgId = document.querySelector("div > img").id; 
 
\t \t 
 
\t \t //Student incorrect answer change image src and id to next element in queue 
 
\t \t document.getElementById(imgId).src = `images/${nextImgId}.jpg`; 
 
     document.getElementById(imgId).id = nextImgId; 
 

 
\t \t //Remove last element in array 
 
     domEls.pop(); 
 
     //move the last element to the first element in the array for another attempt 
 
     domEls.push(LastElArr); 
 
\t \t 
 
\t \t alert(domEls.length); \t \t \t 
 
    } 
 
\t 
 
} 
 
function overlay() { 
 
    var el = document.getElementById("overlay"); 
 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
 
}

#overlay { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width:100%; 
 
    height:100%; 
 
    text-align:center; 
 
    z-index: 1000; 
 
\t 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 { 
 
\t float: right; 
 
\t clear: right; 
 
\t width: 30px; 
 
\t height: 30px; 
 
    bottom: 0; 
 
\t right: 0; 
 
\t 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <span> "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."</span> 
 
\t <link href="https://fonts.googleapis.com/css?family=Oswald:300,700|Varela+Round" rel="stylesheet"> 
 
\t <link rel="stylesheet" type="text/css" href="Stack Rnd Temp.css">--> 
 
\t 
 
\t <script type="text/javascript" src="Stack Rnd Temp.js"></script> 
 
\t 
 
\t <script src="jquery-3.2.1.min.js"></script> 
 
\t <script type="text/javascript" src="StackRndTempjq.js"></script> 
 
\t 
 
\t \t 
 
</head> \t 
 
<body> 
 

 
<div class="title"> 
 
<h1></h1> 
 
</div> 
 

 
<div id="gameboard"> <!--Container for all nine divs--> 
 

 
    <a href='#' onclick='overlay()'>Click here to show the overlay</a> 
 
\t 
 
\t 
 
</div> 
 
<div class="modal" id="overlay"> 
 
     <p> "Right click to answer the question"</p> 
 
\t 
 
\t  <script> 
 
\t \t func = new arrStack(); 
 
\t \t func.nDisplayLastArr(); 
 
\t \t </script> 
 
\t \t 
 
\t \t <img src="images/close.png" id="close-img" onclick="overlay()"> 
 
\t 
 
</div> 
 

 
</body> 
 
</html>

Answer 1

あなたの問題はpushが配列の最後に要素を追加しながらpopは配列から最後の要素を取り除くことです。

shiftを使用して、最初の要素を配列から削除し、答えが間違っている場合は最後にポップします。

また、最後の要素をポップし、unshiftを使用して、他の方向に作業したい冒頭に挿入することもできます。

ここに画像がない簡単なモックアップがあります。

var currentTest = null; 
 

 
function getTest() { 
 
    $('#answer').html("").hide(); 
 

 
    if (tests.length > 0) { 
 
    currentTest = tests.shift(); // remove the first question 
 

 
    $('#question').fadeIn(450).html(currentTest.q); 
 
    return currentTest; 
 
    } else { 
 
    $('#answer').html("Finished").fadeIn(500); 
 
    $('#btnCorrect').unbind(); 
 
    $('#btnWrong').unbind(); 
 
    } 
 

 
} 
 

 
var tests = []; 
 
for (var i = 0; i < 5; i++) { 
 
    var question = "Question " + i; 
 
    var answer = "Answer " + i; 
 
    tests.push({ 
 
    q: question, 
 
    a: answer 
 
    }); 
 
} 
 
$('#btnCorrect').click(function() { 
 
    $('#question').hide(); 
 
    $('#answer').fadeIn(450).html("Correct!"); 
 

 
    window.setTimeout(getTest, 750); 
 
}); 
 

 
$('#btnWrong').click(function() { 
 
    $('#question').hide(); 
 
    tests.push(currentTest); // put the question back in the array 
 
    $('#answer').fadeIn(450).html("Incorrect!"); 
 

 
    window.setTimeout(getTest, 750); 
 
}); 
 

 
$(document).ready(function() { 
 
    getTest(); 
 
})

* { 
 
    font-family: arial; 
 
} 
 

 
#panel { 
 
    height: 50px; 
 
} 
 

 
#answer { 
 
    border: 1px solid #cccccc; 
 
    background: #dedede; 
 
    width: 400px; 
 
} 
 

 
#question { 
 
    border: 1px solid #999999; 
 
    background: #dedede; 
 
    width: 400px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="panel"> 
 
    <div id="answer"></div> 
 

 
    <div id="question"></div> 
 
    </div> 
 

 

 
    <input id="btnCorrect" value="Mock Correct Answer" type="button"> 
 
    <input id="btnWrong" value="Mock Wrong Answer" type="button"> 
 
</body> 
 

 
</html>