Question

我对Javascript / Jquery很陌生，我不太了解它。我目前正在进行互动测验，您需要点击特定位置才能转到下一个问题。我通过找到client-x找到了这个位置。

我尝试使用if then语句创建测验，但我不确定如何更改位置以继续下一个问题。我猜测最好的方法是创建位置数组。

我很欣赏我能得到的任何见解。

JS：

＆＃13;

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

＆＃13;

<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">
						<source src="audio/frog.mp3" type="audio/mpeg">
								Your browser does not support the audio element
						</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>

＆＃13;

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");

 }

}

此处，变量 count 会跟踪所有好的答案。

在 if 中，我将所有内容替换为位置数组中的等效内容。

您可以通过将计数与位置数组的长度进行比较来检查用户是否获得了所有这些。

如何在javascript中创建位置数组？

1 个答案: