0
jquery内で関数（関数showquiz（））を呼び出そうとしていますが、すぐに関数を起動するようです。目的は、draggable_tsをdroppableにドラッグした後にクイズを表示することです。これは私がすべてをアップロードしたリンクです。 http://ceruleanlab.com/prozzle/prozzle.php。ここに私のコードです。jqueryで関数を呼び出す
あなたがdrop関数の内部で、あなたの機能を実行する必要が
function dragItem_ts() {
$(function() {
$("#draggable_ts, #draggable-nonvalid").draggable();
$("#droppable").droppable({
accept: "#draggable_ts",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Correct!")
.alert("I am an alert box!");
}
}
);
}
);
showquiz();
}
function dragItem2() {
showquiz();
$(function() {
$("#draggable2, #draggable-nonvalid").draggable();
$("#droppable2").droppable({
accept: "#draggable2",
drop: function(event, ui) {
$(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 [email protected]"}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is [email protected]"}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is [email protected]"}
// 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";
}#droppable, #droppable2 {
\t width: 150px;
\t height: 150px;
\t padding: 0.5em;
\t float: left;
\t margin: 10px;
}
#draggable_ts,#draggable2, #draggable-nonvalid {
\t width: 100px;
\t height: 100px;
\t padding: 0.5em;
\t float: left;
\t margin: 10px 10px 10px 0;
}
body {
font-family: sans-serif;
background: green;
}
h2 {
margin: 5px 0;
}
#wrapper {
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;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Accept</title>
<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>
</head>
<body>
<div id="draggable-nonvalid" class="ui-widget-content">
<p>I'm draggable but can't be dropped</p>
</div>
<div id="draggable_ts" class="ui-widget-content">
<img src="images/ts_image02.jpg">
</div>
<div id="draggable2" class="ui-widget-content">
\t <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>accept: '#draggable'</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>accept: '#draggable2'</p>
</div>
<div id="droppable3" class="ui-widget-header">
<p>accept: '#draggable2'</p> \t
</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">
[email protected]
</label><br />
<label><input type="radio" name="q1" value="c2">
[email protected]
</label><br />
<label><input type="radio" name="q1" value="c3">
[email protected]
</label><br />
<label><input type="radio" name="q1" value="c4">
[email protected]
</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>
<script>
dragItem_ts();
dragItem2();
</script>
</body>
</html>
さて、showquiz（）;あなたのドロップイベントハンドラの中で...あなたが念頭に置いた順序でコードが魔法のように実行されるわけではなく、特定のシーケンスにコードを書く必要があります。 – Adriani6
このような？ （#draggable_ts、＃draggable-nonvalid））; $（ " ドロップ：機能（イベント、UI）{ $（この） .addClass（ "UI-状態-ハイライト"） .find（ "P"） .htmlを（ "正しい！"） .alert（」私は警告ボックスだ "）;！ .showquiz（）;} } ）;} ）。 } –
正解ですが、 "。"あなたのshowquiz（）の前にそれを削除する必要があります。 – Adriani6