Spot the Differenceゲーム（javascript）

Question

私はSpot the Differenceゲームを作成していますが、それは動作していますが、次のように動作します。イメージが2つあり、5つの違いをクリックすると次のラウンドをプレイするかどうかを尋ねるメッセージが表示されます。

私の質問は...どのようにして次のレベルと異なる2つのイメージと異なる違いを持つものを "再起動"できますか？私は、これは私の実際のコードですべてが同じページで発生したい、私は2番目のレベルを示すために、別のHTMLページに行きたくない...

:)

http://codepen.io/anon/pen/RoYRZq

$(document).ready(function() { 
     // When clicked, show difference 
     $('#transparentmap AREA').click(function() { 
     var theDifference = '#'+$(this).attr('id')+'-diff'; 
     $(theDifference).css('display', 'inline'); 
     $(theDifference).data('clicked', true); 

     // When all differences selected/clicked, show email submission form 
     if($('#camera-diff').data('clicked') && $('#down-diff').data('clicked') && $('#eye-diff').data('clicked') && $('#flour-diff').data('clicked') && $('#uni-diff').data('clicked')) { 
     $('#form_container').css('display', 'inline'); 
     } 

     }); 
    }); 

ご協力いただきありがとうございます。

Answer 1

codepenが壊れているので、これをテストするのは難しいでしょう（おそらく、あなたのイメージをどこかオンラインでホストし、そのリンクをペンから参照しようとします）。

とにかく可能な解決策は、勝利基準がすべて満たされたときに表示されるフォームの中に「再起動」ボタンを入れることです。これは、フォームを隠し、基準のすべてを設定するために定義されるだろう再始動機能を呼び出します

//Put this in the scope of your $(document).ready(function() { }); function 
$('#restart').click(function() { 
    $('#form_container').css('display', 'none'); 
    restart(); 
}) 

：あなたはとてもようなあなたのJavaScriptでこのボタンのクリックイベントにリスナーを設定することができ

<div id="form_container"> 
    <h1>Congratulations! You found all 5!</h1> 
    <p>Are you ready for the next Round?</p><br /> 
    //This is new 
    <button id="restart">Yes<button> 
</div> 

それまでのやり方に戻ります。ここで

var restart = function() { 
    $('#camera-diff').data('clicked', false); 
    $('#down-diff').data('clicked', false); 
    $('#eye-diff').data('clicked', false); 
    $('#flour-diff').data('clicked', false); 
    $('#uni-diff').data('clicked', false); 
    //You can also change the images here 
    $('#camera-diff').css('background','url(contest_files/camera2.png) no-repeat top left;' 
    //etc 
} 

は、あなたがコピーしてあなたのイメージに取り組ん参照して、ローカルにしようとするためのJSFiddleです：https://jsfiddle.net/L6h5cryn/