How to do a simple matching quiz

أقسام الموقع: الإطار الزمني الرياضة معلومات سريعة العلوم الكون الصحة لغة وغيرها المنوعات الحيوانات باختصار تطبيقات وكتب

HOW TO DO A SIMPLE MATCHING QUIZ USING JS AND HTML

In this lesson, you will learn how to make a simple matching quiz. It is similar to drag and drop quiz, but this time, you will press on the word where it changes color, then you are to choose the correct answer for it.

If you want to shuffle the countries, simply copy the full line of that country and paste it in the place of the other country. Here is an example of Canada being the first option and Palestine as the second option.

<text id="text2" onclick="q2()" onmouseup="orange2()">Canada</text> -

<text id="text1" onclick="q1()" onmouseup="orange1()">Palestine</text> -

<text id="text3" onclick="q3()" onmouseup="orange3()">Indonesia</text>

Same thing can be done with the capitals. Do not change anything inside <script> </script> area.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Matching Quiz</title>
</head>
<body style="background-color:blue"><font style="color:white">
<font style="font-family:andalus"><font style="font-size:200%">

<text id="text1" onclick="q1()" onmouseup="orange1()">Palestine</text> -

<text id="text2" onclick="q2()" onmouseup="orange2()">Canada</text> -

<text id="text3" onclick="q3()" onmouseup="orange3()">Indonesia</text>
<br /><br />

<text id="word1" onclick="a1()">Jerusalem</text> <text id="capital1"></text><br />

<text id="word2" onclick="a2()">Ottawa</text> <text id="capital2"></text><br />

<text id="word3" onclick="a3()">Jakarta</text> <text id="capital3"></text><br />
<br />
<p id="message1"></p>

<script>

var x = 0; var y = 0; var z = 0;
var c = 0; var d = 0; var e = 0;

function orange1() {
x = 1;
y = 0;
z = 0;
text1.style.color = "orange";
text2.style.color = "white";
text3.style.color = "white";
}

function orange2() {
x = 0;
y = 1;
z = 0;
text1.style.color = "white";
text2.style.color = "orange";
text3.style.color = "white";
}

function orange3() {
y = 0;
x = 0;
z = 1;
text1.style.color = "white";
text2.style.color = "white";
text3.style.color = "orange";
}

function a1() {
if (x == 1) {
capital1.innerHTML = "Palestine";
c = 1
} else {
x = 0;
c = 0;
text1.style.color = "white";
text2.style.color = "white";
text3.style.color = "white";
}
if (c + d + e == 3) {
message1.innerHTML = "Game Over";
}
}

function a2() {
if (y == 1) {
capital2.innerHTML = "Canada";
d = 1;
} else {
y = 0;
d = 0;
text1.style.color = "white";
text2.style.color = "white";
text3.style.color = "white";
}
if (c + d + e == 3) {
message1.innerHTML = "Game Over";
}
}

function a3() {
if (z == 1) {
capital3.innerHTML = "Indonesia";
e = 1;
} else {
z = 0;
e = 0;
text1.style.color = "white";
text2.style.color = "white";
text3.style.color = "white";
}
if (c + d + e == 3) {
message1.innerHTML = "Game Over";
}
}
</script>
</body>
</html>

If you want to watch the video and see how it is done, you can check it out below.

OTHER RELATED PAGES:

Other Topics:

Islamic Holidays
Health Tips
Sports Facts