页面在jquery

Question

我有一个询问问题的jquery函数，但是当用户点击提交时，无论答案是否正确，它都会自动刷新页面。我的目标是当用户在相应的droppable div上拖动一个图标时，它将显示正常工作的答案，但是当用户回答问题时，它将刷新页面。请帮忙。如果片段不起作用，这是网站。 http://ceruleanlab.com/prozzleRaw/prozzle.php

function dragItem_ts() {
  $(function() {
    $("#draggable_ts, #draggable-nonvalid").draggable();
    $("#droppable_ts").droppable({
      accept: "#draggable_ts",
      drop: function(event, ui) {
        showquiz();
        $(this).addClass("ui-state-highlight").find("p").html("Correct!").alert("I am  an alert  box!");
      }
    });
  });
}

function dragItem_email() {
  $(function() {
    $("#draggable_email, #draggable-nonvalid").draggable();
    $("#droppable_email").droppable({
      accept: "#draggable_email",
      drop: function(event, ui) {
        showquiz2();
        $(this).addClass("ui-state-highlight").find("p").html("Correct!");
      }
    });
  });
}


function dragItem_validation() {
  $(function() {
    $("#draggable_validation, #draggable-nonvalid").draggable();
    $("#droppable_validation").droppable({
      accept: "#draggable_validation",
      drop: function(event, ui) {
        showquiz3();
        $(this)
          .addClass("ui-state-highlight").find("p").html("Correct!");
      }
    });
  });

}

function dragItem_availability() {
  $(function() {
    $("#draggable_availability, #draggable-nonvalid").draggable();
    $("#droppable_availability").droppable({
      accept: "#draggable_availability",
      drop: function(event, ui) {
        showquiz4();
        $(this).addClass("ui-state-highlight").find("p").html("Correct!");
      }
    });
  });
}

function dragItem_order() {
  $(function() {
    $("#draggable_order, #draggable-nonvalid").draggable();
    $("#droppable_order").droppable({
      accept: "#draggable_order",
      drop: function(event, ui) {
        showquiz5();
        $(this)
          .addClass("ui-state-highlight").find("p").html("Correct!");
      }
    });
  });

}

function tabulateAnswers() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;

  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i = 0; i < choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 1;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 1;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 1;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.
  var maxscore = Math.max(c1score, c2score, c3score, c4score);

  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer');
  if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct"
  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is stvsp@am.sony.com"
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is stvsp@am.sony.com"
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is stvsp@am.sony.com"
  }
  // If you add more choices, you must add another response below.
}

// program the reset button
function resetAnswer() {
  var answerbox = document.getElementById('answer');
  answerbox.innerHTML = "Your result will show up here!";
}

function showquiz() {
  var e = document.getElementById('wrapper');
  e.style.display = "block";
}


function tabulateAnswers2() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;

  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i = 0; i < choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 1;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 1;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 1;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.
  var maxscore = Math.max(c1score, c2score, c3score, c4score);

  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer2');
  if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is 24 - 48 hours"
  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is 24 - 48 hours"
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is 24 - 48 hours"
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct"
  }
  // If you add more choices, you must add another response below.
}

// program the reset button
function resetAnswer2() {
  var answerbox = document.getElementById('answer2');
  answerbox.innerHTML = "Your result will show up here!";
}

function showquiz2() {
  var b = document.getElementById('wrapper2');
  b.style.display = "block";
}

function tabulateAnswers3() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;

  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i = 0; i < choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 1;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 1;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 1;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.
  var maxscore = Math.max(c1score, c2score, c3score, c4score);

  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer3');
  if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct"
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  // If you add more choices, you must add another response below.
}

// program the reset button
function resetAnswer3() {
  var answerbox = document.getElementById('answer3');
  answerbox.innerHTML = "Your result will show up here!";
}

function showquiz3() {
  var b = document.getElementById('wrapper3');
  b.style.display = "block";
}

function tabulateAnswers4() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;

  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i = 0; i < choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 1;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 1;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 1;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.
  var maxscore = Math.max(c1score, c2score, c3score, c4score);

  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer4');
  if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct"
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  // If you add more choices, you must add another response below.
}

// program the reset button
function resetAnswer4() {
  var answerbox = document.getElementById('answer4');
  answerbox.innerHTML = "Your result will show up here!";
}

function showquiz4() {
  var b = document.getElementById('wrapper4');
  b.style.display = "block";
}

function tabulateAnswers5() {
  // initialize variables for each choice's score
  // If you add more choices and outcomes, you must add another variable here.
  var c1score = 0;
  var c2score = 0;
  var c3score = 0;
  var c4score = 0;

  // get a list of the radio inputs on the page
  var choices = document.getElementsByTagName('input');
  // loop through all the radio inputs
  for (i = 0; i < choices.length; i++) {
    // if the radio is checked..
    if (choices[i].checked) {
      // add 1 to that choice's score
      if (choices[i].value == 'c1') {
        c1score = c1score + 1;
      }
      if (choices[i].value == 'c2') {
        c2score = c2score + 1;
      }
      if (choices[i].value == 'c3') {
        c3score = c3score + 1;
      }
      if (choices[i].value == 'c4') {
        c4score = c4score + 1;
      }
      // If you add more choices and outcomes, you must add another if statement below.
    }
  }

  // Find out which choice got the highest score.
  // If you add more choices and outcomes, you must add the variable here.
  var maxscore = Math.max(c1score, c2score, c3score, c4score);

  // Display answer corresponding to that choice
  var answerbox = document.getElementById('answer4');
  if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct"
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "Customer will get a brand new replacement"
  }
  // If you add more choices, you must add another response below.
}

// program the reset button
function resetAnswer5() {
  var answerbox = document.getElementById('answer5');
  answerbox.innerHTML = "Your result will show up here!";
}

function showquiz5() {
  var b = document.getElementById('wrapper5');
  b.style.display = "block";
}

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");


}

dragItem_ts();
dragItem_email();
dragItem_validation();
dragItem_availability();
dragItem_order();

#droppable_ts,
#droppable_email,
#droppable_validation,
#droppable_availability,
#droppable_order,
#droppable_quality,
#droppable_shipment,
#droppable_delivery {
  width: 120px;
  height: 120px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}

#draggable_ts,
#draggable_email,
#draggable_validation,
#draggable_availability,
#draggable_order {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
  z-index: 4;
}

body {
  font-family: sans-serif;
}

h2 {
  margin: 5px 0;
}

#wrapper,
#wrapper2,
#wrapper3,
#wrapper4,
#wrapper5 {
  width: 600px;
  margin: 0 auto;
  background: white;
  padding: 10px 15px;
  border-radius: 10px;
  display: none;
}

input {
  margin: 5px 10px;
}

button {
  font-size: 18px;
  padding: 10px;
  margin: 20px 0;
  color: white;
  border: 0;
  border-radius: 10px;
  border-bottom: 3px solid #333;
}

#submit {
  background: green;
}

#reset {
  background: red;
}

#answer {
  border: 1px dashed #ccc;
  background: #eee;
  padding: 10px;
}

#draggable_container {
  background-color: blue;
}

.ui-widget-content {
  background-color: #99ff66;
  margin: auto;
  width: 12.5%;
}

.draggable_container_inner {
  heigth: 100px;
  width: 12.5%;
  float: left;
}

.draggable_container {
  width: 1400px;
}

#droppable_ts {
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#droppable_email {
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* The actual popup */

#droppable_ts .popuptextTs {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
}

#droppable_email .popuptextEmail {
  visibility: visible;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
}


/* Popup arrow */

#droppable_ts.popuptextTs::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

#droppable_email.popuptextEmail::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}


/* Toggle this class - hide and show the popup */

#droppable_ts .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animatitsadeIn 1s;
}

#droppable_email .show2 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animatitsadeIn 1s;
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src=javascript/functions.js>
</script>
<div id="draggable_container">
  <div class="draggable_container_inner">
    <div id="draggable_ts" class="ui-widget-content">
      <img src="images/ts_image02.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_email" class="ui-widget-content">
      <img src="images/email_logo.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_validation" class="ui-widget-content">
      <img src="images/validation_logo.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_availability" class="ui-widget-content">
      <img src="images/availability_logo.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_order" class="ui-widget-content">
      <img src="images/order_logo.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_email" class="ui-widget-content">
      <img src="images/quality_logo.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_email" class="ui-widget-content">
      <img src="images/shipment_logo.jpg">
    </div>
  </div>
  <div class="draggable_container_inner">
    <div id="draggable_email" class="ui-widget-content">
      <img src="images/delivered_logo.jpg">
    </div>
  </div>
</div>
<div id="droppable_container">
  <div id="droppable_ts" class="ui-widget-header" onclick="myFunction()">
    <span class="popuptextTs" id="myPopup">This step is where the  level 1 support does troubleshooting</span>
    <p></p>
  </div>
  <div id="droppable_email" class="ui-widget-header" onclick="myFunction2()">
    <span class="popuptextEmail" id="myPopup">This step is where the customer needs to send the email for verification</span>
    <p></p>
  </div>
  <div id="droppable_validation" class="ui-widget-header">
    <p></p>
  </div>
  <div id="droppable_availability" class="ui-widget-header">
    <p></p>
  </div>
  <div id="droppable_quality" class="ui-widget-header">
    <p></p>
  </div>
  <div id="droppable_shipment" class="ui-widget-header">
    <p></p>
  </div>
  <div id="droppable_delivery" class="ui-widget-header">
    <p></p>
  </div>
</div>
<div id="wrapper">
  <h1>What is the email address that the customer should send them to?</h1>
  <form id="quiz">
    <!-- Question 1 -->
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label>
    <input type="radio" name="q1" value="c1">
      stvsp@am.com
    </label><br />
    <label>
    <input type="radio" name="q1" value="c2">
      svtsp@am.com
    </label><br />
    <label>
    <input type="radio" name="q1" value="c3">
      mydocs@am.com
    </label><br />
    <label>
    <input type="radio" name="q1" value="c4">
      docs@am.com
    </label><br />
    <button type="submit" id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
    <button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
  </form>
  <div id="answer">Your result will show up here!</div>
</div>
<div id="wrapper2">
  <h1>What is the TAT for validating the pictures and POP?</h1>
  <form id="quiz">
    <!-- Question 1 -->
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label>
      <input type="radio" name="q1" value="c1">
      24 hours
    </label><br />
    <label>
      <input type="radio" name="q1" value="c2">
      6 hours
    </label><br />
    <label>
      <input type="radio" name="q1" value="c3">
      72 hours
    </label><br />
    <label>
      <input type="radio" name="q1" value="c4">
      24 - 48 hours
    </label><br />
    <button type="submit" id="submit" onclick="tabulateAnswers2()">Submit Your Answers</button>
    <button type="reset" id="reset" onclick="resetAnswer2()">Reset</button>
  </form>
  <div id="answer2">Your result will show up here!</div>
</div>
<div id="wrapper3">
  <h1>What will the customer get if the original unit is within 90 days from DOP?</h1>
  <form id="quiz">
    <!-- Question 1 -->
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label>
      <input type="radio" name="q1" value="c1">
      Refurbished Unit
    </label><br />
    <label>
      <input type="radio" name="q1" value="c2">
      Brand New Replacement Unit
    </label><br />
    <label>
      <input type="radio" name="q1" value="c3">
      Defective Unit
    </label><br />
    <label>
      <input type="radio" name="q1" value="c4">
      Refund
    </label><br />
    <button type="submit" id="submit" onclick="tabulateAnswers3()">Submit Your Answers</button>
    <button type="reset" id="reset" onclick="resetAnswer3()">Reset</button>
  </form>
  <div id="answer3">Your result will show up here!</div>
</div>
<div id="wrapper4">
  <h1>A B stock unit undergoes a different quality check from that of A stock. True or false?</h1>
  <form id="quiz">
    <!-- Question 1 -->
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label>
      <input type="radio" name="q1" value="c1">
      True
    </label><br />
    <label>
      <input type="radio" name="q1" value="c2">
      False
    </label><br />
    <label> 
      <input type="radio" name="q1" value="c3">
      N/A
    </label><br />
    <label>
      <input type="radio" name="q1" value="c4">
      not sure
    </label><br />
    <button type="submit" id="submit" onclick="tabulateAnswers4()">Submit Your Answers</button>
    <button type="reset" id="reset" onclick="resetAnswer4()">Reset</button>
  </form>
  <div id="answer4">Your result will show up here!</div>
</div>
<div id="wrapper5">
  <h1>A B stock unit undergoes a different quality check from that of A stock. True or false?</h1>
  <form id="quiz">
    <!-- Question 1 -->
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->
    <label>
      <input type="radio" name="q1" value="c1">
      True
    </label><br />
    <label>
      <input type="radio" name="q1" value="c2">
      False
    </label><br />
    <label>
      <input type="radio" name="q1" value="c3">
      N/A
    </label><br />
    <label>
      <input type="radio" name="q1" value="c4">
      not sure
    </label>
      <br />
    <button type="submit" id="submit" onclick="tabulateAnswers5()">Submit Your Answers</button>
    <button type="reset" id="reset" onclick="resetAnswer5()">Reset</button>
  </form>
  <div id="answer5">Your result will show up here!</div>
</div>

Answer 1

确定。截至发现，您已经获得了更改Button类型以提交到按钮的解决方案。现在是下一个解决方案如果答案正确，您想要隐藏该div。

1St解决方案是 老：

<button type="submit" id="submit" onclick="tabulateAnswers4()">

新：

<button type="button" id="submit" onclick="tabulateAnswers4()">

接下来，在回答变更或点击后，转到第二个解决方案以关闭div。

var answerbox = document.getElementById（'answer2'）;

if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is 24 - 48 hours";
    $('wrapper').hide(3000);

  }
  if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is 24 - 48 hours";
    $('wrapper').hide(3000);
  }
  if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
    answerbox.innerHTML = "The correct answer is 24 - 48 hours";
    $('wrapper').hide(3000);
  }
  if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
    answerbox.innerHTML = "You are correct";
    $('wrapper').hide(3000);
  }
  // If you add more choices, you must add another response below.
}

。

$（ '包装'）隐藏（3000）; 时间间隔将帮助用户在一段时间内看到答案。你希望给你多少时间。

有关详细信息，请参阅此文档： http://api.jquery.com/hide/