javascriptで位置の配列を作成する方法は？

Question

私はJavascript/Jqueryの新機能をよく理解していません。現在、インタラクティブなクイズに取り組んでいます。次の質問に進むには、特定の場所をクリックする必要があります。私はクライアントxを見つけることによってその位置を理解しました。

if then文を使用してクイズを作成しようとしましたが、次の質問に移動する位置を変更する方法がわかりません。私はポジションの配列を作成することによって最良の方法があると推測しています。

私が得ることができるすべての洞察に感謝します。

JS：

// var positions = [[510, 650, 680, 768], [700, 930, 630, 768], [580, 630, 260, 320]]; 
 

 
function showCoords(evt) { 
 

 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    console.log("X coords: " + x + ", Y coords: " + y); 
 

 
    var leftIndent = $("#pages")[0].offsetParent.offsetLeft; 
 
    if ((evt.clientX > (510 + leftIndent) && evt.offsetX < (650 + leftIndent)) && (evt.clientY > 680 && evt.clientY < 768)) { 
 
    console.log("answer is correct"); 
 
    $(".question > h3").text("Well Done! You found it.").delay("slow"); 
 
    $(".next-1").addClass("show"); 
 
    $('.next-1').click(function() { 
 
     $("#cam-1").addClass("hide"); 
 
     $("#cam-2").addClass("show"); 
 
     $(".question > h3").text("Find The Camouflaged Animal In This Biome").delay("slow"); 
 

 

 
    }); 
 

 
    } else { 
 
    console.log("answer is wrong"); 
 
    $(".question > h3").text("Sorry, that's not it. Try again.").delay("slow"); 
 

 
    } 
 

 
}

<div id="page-camouflage" onclick="showCoords(event)" class="current"> 
 

 
    <img id="bubble" alt="speech" src="images/bubble.svg"> 
 
    <img class="cloud" alt="clouds floating in the sky" src="images/cloud.png"> 
 

 
    <div class="question"> 
 
    <h3> Find The Camouflaged Animal In This Biome </h3> 
 
    </div> 
 
    <div class="help"> 
 
    <img alt="help button" src="images/help.svg"> 
 
    <h2 id="hint"> 
 
     Frogs like chilling by the pond. 
 
    </h2> 
 
    </div> 
 

 

 
    <div id="cam-1"> 
 

 
    <div class="hidden"> 
 
     <img id="frog" alt="frog" src="images/cam/frog.svg"> 
 
    </div> 
 
    <div> 
 
     <img id="leaf" alt="leaf" src="images/cam/cam1.svg"> 
 
    </div> 
 

 
    <audio id="croak"> 
 
\t \t \t \t \t \t <source src="audio/frog.mp3" type="audio/mpeg"> 
 
\t \t \t \t \t \t \t \t Your browser does not support the audio element 
 
\t \t \t \t \t \t </audio> 
 

 
    <div> 
 
     <img class="next-1" alt="next button" src="images/next.svg"> 
 
    </div> 
 
    </div> 
 

 

 
    <div id="cam-2"> 
 
    <div> 
 
     <img id="lion2" alt="lion" src="images/cam/lion.svg"> 
 
    </div> 
 
    <div> 
 
     <img id="grass" alt="leaf" src="images/cam/grass.svg"> 
 
    </div> 
 
    <div> 
 
     <img class="next-2" alt="next button" src="images/next.svg"> 
 
    </div> 
 

 
    </div> 
 

 
    <div id="cam-3"> 
 
    <div> 
 
     <img id="pigeon" alt="pigeon" src="images/cam/pig.svg"> 
 
    </div> 
 
    <div> 
 
     <img id="tree" alt="tree" src="images/cam/tree.svg"> 
 
    </div> 
 
    <div> 
 
     <img id="trash" alt="trash" src="images/cam/trash.svg"> 
 
    </div> 
 
    </div> 
 

 

 
</div>

Answer 1

あなたは正しい考えを持って、あなただけのビットさらにそれをプッシュする必要があります。

ここ

var positions = [[510, 650, 680, 768], [700, 930, 630, 768], [580, 630, 260, 320]]; 
var count = 0; 

function showCoords(evt) { 

var x = event.clientX; 
var y = event.clientY; 
console.log("X coords: " + x + ", Y coords: " + y); 

var leftIndent = $("#pages")[0].offsetParent.offsetLeft; 
if ((evt.clientX > (positions[count][0] + leftIndent) && evt.offsetX < (positions[count][1] + leftIndent)) && (evt.clientY > positions[count][2] && evt.clientY < positions[count][3])) { 
    console.log("answer is correct"); 
    count++; 
    $(".question > h3").text("Well Done! You found it.").delay("slow"); 
    $(".next-1").addClass("show"); 
    $('.next-1').click(function() { 
    $("#cam-1").addClass("hide"); 
    $("#cam-2").addClass("show"); 
    $(".question > h3").text("Find The Camouflaged Animal In This Biome").delay("slow"); 
    }); 

} else { 
    console.log("answer is wrong"); 
    $(".question > h3").text("Sorry, that's not it. Try again.").delay("slow"); 

} 

} 

、変数数はすべての良い答えを追跡します。

にがある場合は、ポジションの配列にすべてのものを置き換えました。

位置配列の長さとカウントを比較することで、ユーザーがすべてを取得したかどうかを確認できます。