Matching Column Quiz Test and Score code in Javascript JQuery and CSS

This is the code in Javascript JQuery and CSS for Quiz or Test with Score for matching Column.

<html>
<head>
	<title>Arrays chapter matching table</title>
	<link rel="stylesheet" type="text/css" href="all page.css">
	<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<style type="text/css">
		.blue{background: blue;color: white}
		.red{background: red;color:white;}
	</style>
<script type="text/javascript">
function shuffle(arr)
{
	for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
    return arr;
}
var question = ["Referring an element outside the array bounds is a",
"Each element of an array is searched against the searching key, is the specialty of",
"A one-dimensional array of one-dimensional arrays is called",
"The sequence of objects that have the same type, is called",
"The binary search algorithm uses",
"A character array can be initialized using",
"For defining their own types programmer's uses",
"The position number contained within a square brackets e.g. my_array [5], is referred as",
"Array that are declared static are initialized when",
"The objects of an array is called as"];



var answer = ["Logical and Execution time error",
"Linear search",
"Two-dimensional array",
"Arrays",
"Divide and conquer method",
"A string literal",
"Enumerations",
"Sub-scripts",
"Program is loaded into the memory",
"Elements of an array"];



var choices = ["Logical and Execution time error",
"Linear search",
"Two-dimensional array",
"Arrays",
"Divide and conquer method",
"A string literal",
"Enumerations",
"Sub-scripts",
"Program is loaded into the memory",
"Elements of an array"];


choices = shuffle(choices);
</script>
		
</head>
<body>
<div id="heading">
<h1 align="center"> Matching Tables </h1>
<h2 align="center"> C++ Arrays Quiz</h2>
</div>
<br>
<div id="sc">
<table bgcolor="#FFFFFF" align="center" border="2" width="800px;"> 
<tr>
<td align="center" > <b><p align="center"><p id="score"></p></p></b></td>
<td align="center" > <b><p align="center"><p id="right"></p></p></b></td>
<td align="center" > <b><p align="center"><p id="wrong"></p></p></b></td>
</tr>
</table>
</div>
<br>
	<table bgcolor="#FFFFFF" align="center" border="2" width="70%">
		<tr>
			<th>Q.No </th>
			<th>Question Question </th>
			<th>Choices </th>
			<th>Answer </th>
		</tr>
		<tbody class="bodys">
			
		</tbody>
	</table>

</body>
<script type="text/javascript">
		document.getElementById("score").innerHTML ="Total Score : ";
		document.getElementById("right").innerHTML ="Right Answers: ";
		document.getElementById("wrong").innerHTML ="Wrong Answers: ";
	var a=0;
	var index=0;
	$.each(question,function(index,value){
		var html = '<tr class="question-'+index+'"><td>'+(index+1)+'</td><td id="q-'+index+'">'+value+'</td>';

		if(a==0){
		html=html+'<td rowspan="'+question.length+'" id="abc"></td>';
				a=1;
				}		

						html=html+'<td id="answer-'+index+'"></td></tr>"';
		$('.bodys').append(
				html
			);
		
	});
	var str ="";
	var score=0;
	var right=0;
	var wrong=0;
		$.each(choices,function(val,choic){
							str=str+'<input id="choice-'+val+'" align="center" type="radio" name="choice" value="'+choic+'" >'+choic+'<br>';
						});
		$('#abc').html(str);
	$("input:radio").on('change',function(){
	
		if(answer[index] == $(this).val() ){
		var audio= new Audio('Correct-answer.mp3');  
     audio.play();
			$('#answer-'+index).html($(this).val()+" &#10004"/*"&#10102"*/);
			$('#q-'+index).addClass('blue');
			score+=5;
			right++;
		}
		else{
		var audio= new Audio('fail.mp3');  
     audio.play();
			$('#answer-'+index).html($(this).val()+" &#10006")
			$('#q-'+index).addClass('red');

			score-=2;	
			wrong++;		
		}
		document.getElementById("score").innerHTML ="Total Score : "+score;
		document.getElementById("right").innerHTML ="Right Answers: "+right;
		document.getElementById("wrong").innerHTML ="Wrong Answers: "+wrong;
		$(this).attr("disabled","disabled");
		index++;
	});
	
</script>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<html>

<head>

<title>Arrays chapter matching table</title>

.blue{background: blue;color: white}

.red{background: red;color:white;}

</style>

function shuffle(arr)

{

for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);

return arr;

}

var question = ["Referring an element outside the array bounds is a",

"Each element of an array is searched against the searching key, is the specialty of",

"A one-dimensional array of one-dimensional arrays is called",

"The sequence of objects that have the same type, is called",

"The binary search algorithm uses",

"A character array can be initialized using",

"For defining their own types programmer's uses",

"The position number contained within a square brackets e.g. my_array [5], is referred as",

"Array that are declared static are initialized when",

"The objects of an array is called as"];

var answer = ["Logical and Execution time error",

"Linear search",

"Two-dimensional array",

"Arrays",

"Divide and conquer method",

"A string literal",

"Enumerations",

"Sub-scripts",

"Program is loaded into the memory",

"Elements of an array"];

var choices = ["Logical and Execution time error",

"Linear search",

"Two-dimensional array",

"Arrays",

"Divide and conquer method",

"A string literal",

"Enumerations",

"Sub-scripts",

"Program is loaded into the memory",

"Elements of an array"];

choices = shuffle(choices);

</script>

</head>

<body>

<h1 align="center"> Matching Tables </h1>

<h2 align="center"> C++ Arrays Quiz</

h2>

</div>

<br>

<tr>

</tr>

</table>

</div>

<br>

<tr>

<th>Question Question

</th>

<th>Choices </th>

<th>Answer </th>

</tr>

</tbody>

</table>

</body>

document.getElementById("score").innerHTML ="Total Score : ";

document.getElementById("right").innerHTML ="Right Answers: ";

document.getElementById("wrong").innerHTML ="Wrong Answers: ";

var a=0;

var index=0;

$.each(question,function(index,value){

var html = '<tr class="question-'+index+'"><td>'+(index+1)+'</td><td id="q-'+index+'">'+value+'</td>';

if(a==0){

html=html+'<td rowspan="'+question.length+'" id="abc"></td>';

a=1;

}

html=html+'<td id="answer-'+index+'"></td></tr>"';

$('.bodys').append(

html

);

});

var str ="";

var score=0;

var right=0;

var wrong=0;

$.each(choices,function(val,choic){

str=str+'<input id="choice-'+val+'" align="center" type="radio" name="choice" value="'+choic+'" >'+choic+'<br>';

});

$('#abc').html(str);

$("input:radio").on('change',function(){

if(answer[index] == $(this).val() ){

var audio= new Audio('Correct-answer.mp3');

audio.play();

$('#answer-'+index).html($(this).val()+" &#10004"/*"&#10102"*/);

$('#q-'+index).addClass('blue');

score+=5;

right++;

}

else{

var audio= new Audio('fail.mp3');

audio.play();

$('#answer-'+index).html($(this).val()+" &#10006")

$('#q-'+index).addClass('red');

score-=2;

wrong++;

}

document.getElementById("score").innerHTML ="Total Score : "+score;

document.getElementById("right").innerHTML ="Right Answers: "+right;

document.getElementById("wrong").innerHTML ="Wrong Answers: "+wrong;

$(this).attr("disabled","disabled");

index++;

});

</script>

</html>

Matching Column Quiz Test and Score code in Javascript JQuery and CSS
By: Prof. Dr. Fazal Rehman | Last updated: February 3, 2024

Related Posts: