calling function with a jquery

Question

I'm trying to call a function (function showquiz() ) inside a jquery but it seems like it activates the function right away. The objective is to show the quiz after dragging the draggable_ts to droppable. This is the link where I uploaded everything. http://ceruleanlab.com/prozzle/prozzle.php. here is my code.

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 { 
	width: 150px; 
	height: 150px; 
	padding: 0.5em; 
	float: left; 
	margin: 10px; 
}
#draggable_ts,#draggable2, #draggable-nonvalid { 
  	width: 100px; 
  	height: 100px; 
  	padding: 0.5em; 
  	float: left; 
  	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">
	 <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>	
</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
    </label><br />
    <label><input type="radio" name="q1" value="c2">
      svtsp@am
    </label><br />
    <label><input type="radio" name="q1" value="c3">
      mydocs@am
    </label><br />
    <label><input type="radio" name="q1" value="c4">
      docs@am
    </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>

Well then, move the showquiz(); inside your drop event handler... code doesn't magically execute in the order you have in mind, you need to code to your specific sequence. — Adrian
– Adrian, Commented Sep 25, 2017 at 11:03
like this? 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(); } } ); } ); } — Ryan Arellano
– Ryan Arellano, Commented Sep 25, 2017 at 11:06
Correct, you have a "." in front of your showquiz() you need to remove it. — Adrian
– Adrian, Commented Sep 25, 2017 at 11:07
doesn't work as expected, it calls the function right away, does not even have to drag — Ryan Arellano
– Ryan Arellano, Commented Sep 25, 2017 at 11:52
Don't forget to do the same in your second function. Also your fiddle doesn't work. — Adrian
– Adrian, Commented Sep 25, 2017 at 11:55

A. Iglesias · Accepted Answer · 2017-09-25 11:57:10Z

1

You have to execute your function inside of the drop function...

$(function() {

    $('#draggable_ts, #draggable-nonvalid').draggable();

    $('#droppable').droppable({
        accept: '#draggable_ts',
        drop: function( event, ui ) {  // This function is executed when you drop it.
            showquiz(); // So here you execute your function
            $(this).addClass('ui-state-highlight').find('p').html('Correct!');
        }
    });
});

A piece of advice, if your linking your javascript functions.js file, there's no need to create and execute that dragItem_ts() and dragItem2() functions. Just put your draggable and droppable code inside of the document.ready function, and that behaviour will be assigned to your divs...

$(function() {

    $('#draggable_ts, #draggable-nonvalid').draggable();
    $('#droppable').droppable({
        accept: '#draggable_ts',
        drop: function( event, ui ) {  // This function is executed when you drop it.
            showquiz(); // So here you execute your function
            $(this).addClass('ui-state-highlight').find('p').html('Correct!');
        }
    });

    $('#draggable2, #draggable-nonvalid').draggable();        
    $('#droppable2').droppable({
        accept: '#draggable2',
        drop: function( event, ui ) {  // This function is executed when you drop it.
            showquiz(); // So here you execute your function
            $(this).addClass('ui-state-highlight').find('p').html('Correct!');
        }
    });
});

... and remove this in your html...

<script>
    dragItem_ts();
    dragItem2();
</script>

I hope it helps

edited Sep 25, 2017 at 11:57

answered Sep 25, 2017 at 11:49

A. Iglesias

2,6752 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Arellano Over a year ago

wow it worked !!! thanks a lot for explaining what I could not understand. Now I know that you can call a function inside a jquery. Thank you so much

A. Iglesias Over a year ago

Good to hear!! Have a nice day and happy coding!!

Collectives™ on Stack Overflow

calling function with a jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related