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()+" ✔"/*"❶"*/);
$('#q-'+index).addClass('blue');
score+=5;
right++;
}
else{
var audio= new Audio('fail.mp3');
audio.play();
$('#answer-'+index).html($(this).val()+" ✖")
$('#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>