I have a little quiz written in php with questions of two types : single choice answer via radio buttons and multiple choice answers via checkboxes. The code run in a single file ("quiz.php") that handles the display of the questions as well as the treatment of the answers.
Everything was working smoothly until I had to add a third type for "sortable list" of answers --where people have to re-order a list of choices.
After some research, I've found what I think is the answer : the "sortable" interaction of jQuery UI. Simple, straightforward and easy to implement… even if I can't seem to make it work !
My problem is that if I know a little bit of PHP/MySql, I know very little of Javascript and certainly not know enough to write or debug it properly.
Here's the code, starting with all the php for the display of questions and the process of the answers :
// File quiz.php
<?php session_start();
// if the form has just been submitted, handle the answers
if (isset($_POST['submit'])) {
// Do something, on a case by case basis :
switch ($_SESSION['questionType']) {
case 1 : // for radio buttons
// some code to process and save the answer to the database
break ;
case 2 : // for checkboxes
// some code to process and save the answer to the database
break ;
case 3 : // for sortable lists
// some code to process and save the answer to the database
break ;
}
}
// Here, get the elements to show from the DB, including
// the question type for the switch below
// questionType = 1 for single choice answer
// questionType = 2 for multiple choice answer
// questionType = 3 for sortable choice answer
?>
Next, the html to display the questions :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quiz</title>
<link rel="stylesheet" href=./quiz.css">
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
</head>
<body>
<?php // A bunch of code to echo the question ?>
<form action="quiz.php" method="POST">
<?php // A switch to adapt the display to the type of questions :
switch ($_SESSION['questionType']) {
case 1 : // for single choice answer
// A bunch of code to echo the possible choices w/ radio buttons
break ;
case 2 : // for multiple choice answer
// A bunch of code to echo the possible choices w/ checkboxes
break ;
case 3 : // for sortable lists ?>
<!-- the following would normaly be generated via php with info from the DB -->
<ul id="sort">
<li id="choice_1">Item 1</li>
<li id="choice_2">Item 2</li>
<li id="choice_3">Item 3</li>
<li id="choice_4">Item 4</li>
<li id="choice_5">Item 5</li>
</ul>
<?php break ; ?>
<?php } ?>
<input type="submit" name="submit" value="Submit">
</form>
and this is where it breaks
<script type="text/javascript">
$(function() {
$("#sort").sortable({
var newOrder = $(this).sortable('serialize');
// the 'quiz.php' file called below is the one we're in
$.post('quiz.php', {sort: newOrder };
});
$("#sort").disableSelection();
});
</script>
</body>
</html>
What has me stumped is that not only is the result not sent to $_POST after the form has been submitted --so nothing happens-- but the 2 lines of code inside the $("#sort").sortable() function breaks the interaction behavior completely i.e the list isn't sortable AND the text can be selected.
Any hint, help ?
[EDIT] : Thanks to Jordan, I've got the sortable part runing but the data still isn't being sent.
The code in use now :
<script type="text/javascript">
$(function() {
$('#sort-form').on('submit',function(event){
// Prevent the form from being submitted normally
event.preventDefault();
var newOrder = $(this).sortable('serialize');
$.post('quiz.php', {sort: newOrder };
});
</script>
doesn't result in anything, with the console in Chrome now saying that there is an "Uncaught SyntaxError : Unexpected end of input" juste before the closing tag. I don't know if it's relevant or not but it has me thinking that either I'm missing a typo somewhere or the function needs more arguments…
[EDIT 2] Replaced the "-" on the <li> id's with underscores (more compliant w/ jQuery UI guidelines)
