javascript - Uncaught SyntaxError: Invalid or unexpected token on line 118, but it does take the user value from the database
one text
I am taking the exciting running and tested code with different database. I am able to connect to the database and the file did take user id from the database but when I click on button "click here to begin" nothing happens no error log entry was generated. just the Uncaught SyntaxError: Invalid or unexpected token when inspect (ctrl + shift + i) the file.
<!DOCTYPE HTML>
<?php
require("db.php");
$userid = mysqli_real_escape_string($db_connection, $_GET["user_id"]);
$strSQL = "SELECT * FROM `t01_users` where `a01_userid` = '. $userid.' ";
$result = mysqli_query($db_connection, $strSQL) or die(mysqli_error($db_connection));
if (!$result) {
echo("<p>Error performing query: " . mysqli_error($db_connection) . "</p>");
exit();
}
$row = mysqli_fetch_array($result);
?>
<head>
<title>TEST YOUR KNOWLEDGE</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div>
<div>
<h1 class="text-center">TEST YOUR KNOWLEDGE</h1>
<!-- display course title -->
<p class="text-center" id="course_title">Test quiz</p>
</div>
<div>
</div>
<!-- display quiz score -->
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6 text-right">
<span id="your_score"> </span>
</div>
</div>
<!-- quiz part -->
<div id="quiz_part">
<div>
<img src="images/cubic.png">
</div>
<div>
<p class="text-center">This quiz contains <span id="number_of_question">8</span> questions.<br>
<span class="text-center">
You need to achieve a score of at least <span id="pass_percentage">80</span>% to complete the course.</span>
</p>
</div>
<div class="text-center">
<button id="start_quiz">CLICK HERE TO BEGIN</button>
</div>
</div>
<div class="text-right" id="submit_button_div">
</div>
</div>
</div>
<div id="no_check" title="Invalid answer" style="font-family:Calibri;">Please select an answer before submitting.</div>
<div id="correct" title="This is correct." class="dialog">
<div class="correct_content" style="font-family:Calibri;"></div>
</div>
<div id="incorrect" title="This is incorrect." class="dialog">
<div class="incorrect_content" style="font-family:Calibri;"></div>
</div>
<script>
$(document).ready(function () {
var screenWidth, dialogWidth;
screenWidth = window.screen.width;
if ( screenWidth < 500 ) {
dialogWidth = screenWidth * .95;
} else {
dialogWidth = 500;
}
var userid = <?php echo $userid ; ?>;
var flag = 0;
var score = 0;
var current_question_number = 0;
var current_question = "";
var course_title = "";
var number_of_question = 0;
var pass_percentage = 0;
var progress_url = "";
var pass_remark = "";
var failed_remark = "";
var questions = new Array();
$( "#no_check" ).dialog({ autoOpen: false });
$.getJSON( "questions.json", function(data) {
// note: this getJSON access the file asynchronously. must set value inside the block
course_title = data.course_title;
$("#course_title").html(course_title);
number_of_question = data.number_of_question;
$("#number_of_question").html(number_of_question);
pass_percentage = data.pass_percentage;
$("#pass_percentage").html(pass_percentage);
progress_url = data.progress_url
//alert(progress_url);
pass_remark = data.pass_remark;
failed_remark = data.failed_remark;
for(i=0; i<data.question_list.length; i++){
questions[i]=new Array;
questions[i]["question_number"] = data.question_list[i].question_number;
questions[i]["annotation"] = data.question_list[i].annotation;
questions[i]["question"] = data.question_list[i].question;
questions[i]["type"] = data.question_list[i].type;
questions[i]["instruction"] = data.question_list[i].instruction;
choice = new Array();
for (j=0; j<data.question_list[i].choice.length; j++){
var option = new Array();
option["label"] = data.question_list[i].choice[j].label;
//alert(data.question_list[i].choice[j].label);
option["option"] = data.question_list[i].choice[j].option;
choice[j] = option;
}
questions[i]["choice"] = choice;
questions[i]["answer"] = data.question_list[i].answer;
questions[i]["correct_description"] = data.question_list[i].correct_description;
questions[i]["incorrect_description"] = data.question_list[i].incorrect_description;
questions[i]["correct_comment"] = data.question_list[i].correct_comment; //**********************
questions[i]["incorrect_comment"] = data.question_list[i].incorrect_comment; //************************
}
});
$("#start_quiz").on("click", function(){
$("#your_score").html("YOUR SCORE: " + score + " OUT OF " + number_of_question);
current_question = questions[current_question_number];
if (current_question["annotation"] != "" && flag == 0){
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p>" + current_question["annotation"] + "</p>";
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='annotation_continue' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>Click to Continue</button>");
}else{
flag = 0;
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p><span style='color: red;'>" + current_question["type"] + "</span> " + current_question["question"] + " <b>" + current_question["instruction"] + "</b></p><br>";
for (m = 0; m<current_question["choice"].length; m++){
question_html += "<p> <input type='radio' name='choice' value='" + current_question["choice"][m]["label"] + "'> <span class='radio-content'>" + current_question["choice"][m]["option"] + "</span></p>";
}
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='submit_answer' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>SUBMIT</button>");
}
});
$("#submit_button_div").on('click', '#annotation_continue', function(){
flag = 1;
continue_button();
});
// $("#submit_answer").on("click", function(){
$("#submit_button_div").on('click', '#submit_answer', function(){
//current_question_number++;
var answer = current_question["answer"];
var correct_desc = current_question["correct_description"];
var incorrect_desc = current_question["incorrect_description"];
var correct_comment = current_question["correct_comment"]; //************************
var incorrect_comment = current_question["incorrect_comment"]; //************************
var checked_answer = $("input[name='choice']:checked").val();
if (!checked_answer){
//$( "#no_check" ).dialog("open");
dialog = $("#no_check").dialog({
//width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 200,
height: 'auto',
modal : true,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: {
'OK': function () {
agreed = true;
$(this).dialog("close");
}
},
beforeClose: function () {
return agreed;
}
});
dialog.dialog("open");
}else if(checked_answer == answer){
current_question_number++;
//autoOpen : false,
score++;
// submit the new score to server
$.ajax({
method: "POST",
url: progress_url,
data: { a01_userid: userid, userProgress: score }
});
$("#your_score").html("YOUR SCORE: " + score + " OUT OF " + number_of_question);
$(".correct_content").html("<span style='color:green; font-family:Calibri;'>" + correct_desc + "</span> " + correct_comment); //*****************************
$("#correct").dialog({
width: dialogWidth,
height: 'auto',
position: {my: "center", at: "center", of: window},
modal : true,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: [
{
text: "Continue",
class: 'correct_button',
click: function() {
$(this).dialog("close");
}
}
],
beforeClose: function () {
continue_button();
}
}).prev(".ui-dialog-titlebar").css("color","green");
$("#correct").dialog("open", "position", {my: "center", at: "center", of: window});
}else{
current_question_number++;
$(".incorrect_content").html("<span style='color:red; font-family:Calibri;'>" + incorrect_desc + "</span> " + incorrect_comment); //****************
$("#incorrect").dialog({
width: dialogWidth,
height: 'auto',
position: {my: "center", at: "center", of: window},
modal : true,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
buttons: [
{
text: "Continue",
class: 'incorrect_button',
click: function() {
$(this).dialog("close");
}
}
],
beforeClose: function () {
continue_button();
}
}).prev(".ui-dialog-titlebar").css("color","red");
$("#incorrect").dialog("open", "position", {my: "center", at: "center", of: window});
}
});
$("#quiz_part").on('click', '#retry_button', function(){
location.reload(true);
});
function continue_button(){
if (current_question_number == number_of_question){
var percentage = score / number_of_question;
var pass = pass_percentage / 100;
if (percentage >= pass){
passed();
}else{
failed();
}
return false;
}
current_question = questions[current_question_number];
if (current_question["annotation"] != "" && flag == 0){
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p>" + current_question["annotation"] + "</p>";
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='annotation_continue' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>Click to Continue</button>");
}else{
flag = 0;
var question_html = "<p><b>Question " + current_question["question_number"] + " of " + number_of_question + "</b></p><br>";
question_html += "<p><span style='color: red;'>" + current_question["type"] + "</span> " + current_question["question"] + " <b>" + current_question["instruction"] + "</b></p><br>";
for (m = 0; m<current_question["choice"].length; m++){
question_html += "<p> <input type='radio' name='choice' value='" + current_question["choice"][m]["label"] + "'> <span class='radio-content'>" + current_question["choice"][m]["option"] + "</span></p>";
}
$("#quiz_part").html(question_html);
$("#submit_button_div").html("<button id='submit_answer' style='background-color:#F6761D; color:#FFF; padding:3px 13px; font-weight:bold; border:2px solid #cccccc; margin-right:15px;'>SUBMIT</button>");
}
}
function passed(){
var failed_html = '<div style="width:100%;padding: 1.5vw 0 1vw 0;" class="text-center"> \
<img src="images/success.png" style="width: 70%"> \
</div>';
$("#quiz_part").html(failed_html);
$("#submit_button_div").html("");
}
function failed(){
var failed_html = '<div style="width:100%;padding: 1.5vw 0 1vw 0;" class="text-center"> \
<img src="images/failed.png" style="width: 70%"> \
</div> \
<div style="width:100%;padding: 1vw 0 1vw 0;" class="text-center"> \
<p class="text-center" style="color:#222222;"><b>';
failed_html += failed_remark;
failed_html += '</b></p></div>';
failed_html += '<div style="width:100%;" class="text-center" id="retry_div"> \
<button id="retry_button" style="padding:1vw 3vw; background-color: #293155; font-weight: bold; font-size: 24px; color:#ffffff;" id="start_quiz">CLICK HERE TO RETRY</button> \
</div>';
$("#quiz_part").html(failed_html);
$("#submit_button_div").html("");
}
});
</script>
</body>
</html>
when i click on the error on right corner it shows: var userid = ***@test.in; //which the userid from the database
Source