Scribd
Upload
29 views49 pages

Isset: Include If

Uploaded by

ch6278ange
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
29 views49 pages

Isset: Include If

Uploaded by

ch6278ange
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 49

<?

php

include 'connect.php';

if(isset($_POST['Sign Up'])){
$Username=$_POST['uName'];
$password=$_POST['password'];
$password=md5($password);

$insertQuery="INSERT INTO users(Username,password)";


$insertQuery.="VALUES ('$Username','$password')";
if($conn->query($insertQuery)==TRUE){
header("location: index.php");
}
else{
echo "Error:".$conn->error;
}

if (isset($_POST['Sign Up'])){
$Username=$_POST['$Username'];
$password=$_POST['password'];
$password=md5($password);

$sql="SELECT * FROM users WHERE Username='$username' and


password='$password'";
$result=$conn->query($sql);
if($result->num_rows>0){
session_start();
$row=$result->fetch_assoc();
$_SESSION['Username']=$row['Username'];
header("location: home.php");
exit();
}
else{
echo "Invalid username or password";
}
}
?>

<!-- signin.html -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Binary Calculator - Sign Up</title>
<style>
body {
background-color: #f0f0f0; /* light gray background color */
font-family: Arial, sans-serif;
}
header {
background-color: #333; /* dark gray background color */
color: #fff; /* white text color */
padding: 20px;
text-align: center;
}
main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
section {
background-color: #fff; /* white background color */
padding: 20px;
border: 1px solid #ddd; /* light gray border */
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
p{
font-size: 16px;
margin-bottom: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #444;
}
</style>
</head>
<body>
<header>
<img src="logo.png" alt="Binary Vault" id="logo">
</header>
<main>
<section>
<h1>Sign Up</h1>
<form id="signup-form">
<label for="username">Username:</label>
<input type="text" id="username"
name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password"
name="password"><br><br>
<input type="submit" value="Sign Up">
</form>
</section>
</main>

<script>
const signinForm = document.getElementById('signup-form');

signinForm.addEventListener('submit', (e) => {


e.preventDefault();
const username =
document.getElementById('username').value;
const password =
document.getElementById('password').value;

// Assume the credentials are valid for now


// In a real-world scenario, you would send the credentials to a
backend API for validation
if (username && password) {
// Redirect to home page
window.location.href = 'home.php';
} else {
alert('Invalid username or password');
}
});
</script>

<footer>
<a href="log.php">Log In</a>
<a href="index.php">Go back</a>
</footer>
</body>
</html>

<?php

include 'connect.php';

if(isset($_POST['Sign Up'])){
$Username=$_POST['username'];
$password=$_POST['password'];
$password=md5($password);

$insertQuery="INSERT INTO users(Username,password)";


$insertQuery.="VALUES ('$Username','$password')";
if($conn->query($insertQuery)==TRUE){
header("location: home.php");
exit();
}
else{
echo "Error:".$conn->error;
}

$sql="SELECT * FROM users WHERE Username='$Username' and


password='$password'";
$result=$conn->query($sql);
if($result->num_rows>0){
session_start();
$row=$result->fetch_assoc();
$_SESSION['Username']=$row['Username'];
header("location: home.php");
exit();
}
else{
echo "Invalid username or password";
}
}

Python script for WhatsApp support


# WhatsApp chat link generator
def generate_whatsapp_chat_link(country_code, whatsapp_number,
welcome_message=None):
# Generate the WhatsApp chat link
chat_link = f"https://wa.me/{country_code}{whatsapp_number}"

# Add the welcome message if provided


if welcome_message:
chat_link += f"?text={welcome_message}"

return chat_link

# Example usage
country_code = "91"
whatsapp_number = "872849182"
welcome_message = "Hello! How can I assist you today?"

chat_link = generate_whatsapp_chat_link(country_code,
whatsapp_number, welcome_message)
print(chat_link)

Chat page(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Chat Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">

<h2>Chat Page</h2>
</div>
<div class="chat-messages">
<!-- messages will be displayed here -->
</div>
<div class="chat-input">
<input type="text" id="message-input" placeholder="Type a
message...">
<button id="send-button">Send</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

Admin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Admin Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h2>Admin Page</h2>
</div>
<div class="chat-messages">
<!-- messages will be displayed here -->
</div>
<div class="chat-input">
<input type="text" id="response-input" placeholder="Type a
response...">
<button id="respond-button">Respond</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Admin.css
.chat-container {
max-width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chat-header {
background-color: #f0f0f0;
padding: 10px;
border-bottom: 1px solid #ddd;
}

.chat-messages {
padding: 20px;
}

.chat-input {
padding: 10px;
border-top: 1px solid #ddd;
}

.chat-input input[type="text"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 10px;
font-size: 16px;
}

.chat-input button[type="button"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
}
.chat-input button[type="button"]:hover {
background-color: #3e8e41;
}

Admin.js
// Get the chat input and send button elements
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// Get the admin response input and respond button elements


const responseInput = document.getElementById('response-input');
const respondButton = document.getElementById('respond-button');

// Set up event listeners for the send and respond buttons


sendButton.addEventListener('click', sendMessage);
respondButton.addEventListener('click', respondToMessage);

// Function to send a message from the chat page


function sendMessage() {
const message = messageInput.value.trim();
if (message !== '') {
// Send the message to the admin page using WebSocket or AJAX
// For this example, we'll use a simple WebSocket connection
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
socket.send(`message=${message}`);
};
messageInput.value = '';
}
}

// Function to respond to a message from the admin page


function respondToMessage() {
const response = responseInput.value.trim();
if (response !== '') {
// Send the response to the chat page using WebSocket or AJAX
// For this example, we'll use a simple WebSocket connection
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
socket.send(`response=${response}`);
};
responseInput.value = '';
}
}

// Set up WebSocket connection to receive messages and responses


const socket = new WebSocket('ws://localhost:8080');
socket.onmessage = function(event) {
const message = event.data;
if (message.startsWith('message=')) {
// Display the message on the chat page

Html code for quiz page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quiz Test</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Architects Daughter">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Caesar Dressing">
<script src="script.js" type="text/script"></script>
</head>
<body>

<div id="wrap">
<header>
<div class="p_title">Car Quiz</div>
<div class="p_top_car"><img
src="images/black_car.png" alt="Car" title="Car"></div>
</header>
<h2 id="status"></h2>

<div id="test">

</div>

</div>
</body>
</html>

Css stylesheet for the quiz page

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
position: relative;
max-width: 1000px;
margin: auto;
background-color: #E0E0E0;
}

@media all and (min-width: 1000px) {


body{font-size: 20px;}
}

@media all and (max-width: 1000px) {


body{font-size: 2vw;}
}

/*-----STYLE FOR HOMEPAGE-----*/


#wrap {
position: absolute;
width: 100%;
margin-top: 1%;
}

header {
position: absolute;
margin-top: 2%;
width: 100%;
padding-bottom: 10%;
}

.title {
position: absolute;
left: 5%;
bottom: 0;
font-family: 'Caesar Dressing', Arial, sans-serif;
font-size: 10vmin;
color: #2196F3;
width: 50%;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
animation: anim_title 0.5s ease;
}

@keyframes anim_title {
0% {bottom: 100%;}
100% {bottom: 0;}
}

.top_car {
position: absolute;
bottom: 0;
right: 5%;
width: 50%;
text-align: right;
animation: anim_top_car 0.5s ease;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}

@keyframes anim_top_car {
0% {margin-right: 50%; opacity: 0;}
100% {margin-right: 0; opacity: 1;}
}

.top_car img {
width: 50%;
margin-top: 6%;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

section {
position: absolute;
width: 90%;
margin-top: 14%;
margin-left: 5%;
padding-bottom: 50%;
border: 3px solid #212121;
overflow: hidden;
animation: anim_section 1s ease;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}
@keyframes anim_section {
0% {left: -100%; padding-bottom: 0%; opacity: 0;}
50% {left: 0%; padding-bottom: 0%; opacity: 0.5;}
100% {padding-bottom: 50%; opacity: 1;}
}

.txt {
position: absolute;
width: 90%;
margin-top: 3%;
margin-left: 5%;
font-size: 2em;
color: #212121;
text-align: center;
font-family: 'Architects Daughter', Arial, sans-serif;
animation: anim_txt 1s ease;
animation-delay: 1.5s;
animation-fill-mode: backwards;
}

@keyframes anim_txt {
0% {margin-top: -30%;}
100% {margin-top: 3%;}
}

.txt2 {
position: absolute;
margin-top: 25%;
font-size: 2em;
color: #212121;
text-align: center;
font-family: 'Architects Daughter', Arial, sans-serif;
width: 100%;
animation: anim_txt2 1s ease;
animation-delay: 3.5s;
animation-fill-mode: backwards;
}

@keyframes anim_txt2 {
0% {opacity: 0; font-size: 0.5em; margin-top: 40%;}
100% {opacity: 1; font-size: 2em; margin-top: 25%;}
}

.play {
position: absolute;
width: 100%;
margin-top: 35%;
text-align: center;
animation: anim_play 1.2s ease;
animation-delay: 2s;
animation-fill-mode: backwards;
}

@keyframes anim_play {
0% {left: -70%; transform: rotate(-45deg);}
100% {left: 0%; transform: rotate(0deg);}
}

.fa-car-side {
font-size: 6em;
color: #F44336;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/*-----STYLE FOR QUIZ PAGES-----*/


.p_txt {
position: absolute;
width: 90%;
margin-top: 5%;
margin-left: 5%;
font-size: 2em;
color: #212121;
text-align: center;
font-family: 'Architects Daughter', Arial, sans-serif;
animation: anim_p_txt 1s ease;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}

@keyframes anim_p_txt {
0% {margin-top: -30%;}
100% {margin-top: 5%;}
}

.p_title {
position: absolute;
width: 50%;
left: 5%;
bottom: 0;
font-family: 'Caesar Dressing', Arial, sans-serif;
font-size: 10vmin;
color: #2196F3;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.p_top_car {
position: absolute;
bottom: 0;
right: 5%;
width: 50%;
text-align: right;
}

.p_top_car img {
width: 50%;
margin-top: 6%;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/*STYLE FOR QUIZ FRAME*/


#test {
width: 90%;
height: 300px;
margin-top: 20%;
position: absolute;
border: 3px solid #000000;
padding: 10px 40px 40px 40px;
background-color: #E5FCE3;
}

Javascript for the quiz page

var pos = 0, correct = 0;


var test, status, question, choice, choices, chA, chB, chC, chD;
var questions = [
["1 + 1 bằng mấy", "2", "3", "4", "5", "A"],
["2 * 2 bằng mấy", "2", "4", "6", "8", "B"],
["3 / 3 bằng mấy", "1", "2", "3", "4", "A"],
["4 + 4 bằng mấy", "8", "88", "2", "44", "A"],
["6 + 9 bằng mấy", "69", "96", "15", "51", "C"]
];
function get(id){
return document.getElementById(id);
}
function makeQuestion(){
test = get("test");
if (pos >= questions.length) {
test.innerHTML = "<h2>Bạn đã trả lời "+correct+" trên
"+questions.length+" câu</h2>";
get("status").innerHTML = "Kết thúc";
pos = 0;
correct = 0;
return false;
}

get("status").innerHTML = "Câu "+ (pos + 1);


question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
chD = questions[pos][4];

test.innerHTML = "<h3>" + question + "</h3>" + "<br><br>";


test.innerHTML += "<input type='radio' name='choices' value='A'> " +
chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> " +
chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> " +
chC + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='D'> " +
chD + "<br><br>";
test.innerHTML += "<button
onclick='checkAnswer()'>Submit</button>";
}
function checkAnswer() {
choices = document.getElementsByName("choices");
for(i = 0; i < choices.length; i++) {
if(choices[i].checked) {
choice = choices[i].value;
};
};
if(choice == questions[pos][5]) {
correct++;
};
pos++;
makeQuestion();
};

window.addEventListener("load", makeQuestion);

Choosing for the subjects html code


<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Quiz Subject Options</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Choose a Subject</h1>
<div class="button-container">
<a href="https://codepen.io/yourusername/full/url-to-english-quiz-
page" class="subject-button">English</a>
<a href="https://codepen.io/yourusername/full/url-to-math-quiz-
page" class="subject-button">Math</a>
<a href="https://codepen.io/yourusername/full/url-to-science-quiz-
page" class="subject-button">Science</a>
<a href="#" class="subject-button">Malay</a>
</div>
</div>
</body>
</html>

Css stylesheet for the choosing page


body {
margin: 0;
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: #92c47c; /* Pleasant green background color */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
text-align: center;
padding: 30px;
background-color: #ffffff; /* Container background color */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
font-size: 36px;
color: #333333; /* Title color */
margin-bottom: 20px;
}

.button-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.subject-button {
font-family: 'Comic Sans MS', cursive, sans-serif; /* Cute font for buttons
*/
font-size: 18px;
padding: 15px 30px;
margin: 10px;
cursor: pointer;
border: none;
background-color: #4CAF50; /* Button background color */
color: white; /* Button text color */
border-radius: 25px; /* Round button shape */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
text-decoration: none; /* Remove underline */
transition: background-color 0.3s ease;
}

.subject-button:hover {
background-color: #45a049; /* Darker shade on hover */
}

Javascript for the choosing page


function playSound(soundFile) {
const audio = new Audio(soundFile);
audio.play();
}
SAMPROB OWN QUIZ PAGE
HMTL
<html>

<head>
<meta charset="utf-8">
<title id="top"> Samprob </title>
<link rel="stylesheet" type="text/css" href="Style.css">
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:100"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?
family=Quicksand:500" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.js">
</script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-
scale=1">

<link rel="stylesheet" type="text/css" href="style.css"/>


<!-- font-awesome is used to print the username and password
locker icons -->
<link rel="stylesheet" type="text/css"
href="font-awesome-4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/font-
awesome.min.css" />
<script src="JavaScript.js" defer> </script>
<link href="http://fonts.googleapis.com/css?
family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?
family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css"
>
</head>

<body>
<div class="wrapped">
<audio id="myAudio">
<source src="https://vocaroo.com/i/s0O58f4obFSb"
type="audio/mpeg">
</audio>
<nav>
<div class="logo">SAMPROB</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Topics</a></li>
<li><a href="#">Formulae</a></li>
<li><a href="#">Quiz</a></li>
<li><a class="active" href="#">Interactions</a></li>
</ul>
</nav>
</div>

<section class="sec1">
<div id="firstQ&A">
<h2 class= "question" id= "question"></h2>
<h2 class="score"> Score: <span class="scoreVal">0</span>
</h2>
<h2 class="quesitonNum"> Question: <span
class="questionNumVal">1</span>/20 </h2>
<div id="questionImage"> </div>
<div class="buttons">
<input id= "answer1" type="button" name="answer1"
class="answer" onclick="">
<input id= "answer2" type="button" name="answer2"
class="answer" onclick=""><br/>
<input id= "answer3" type="button" name="answer3"
class="answer" onclick="">
<input id= "answer4" type="button" name="answer4"
class="answer" onclick=""><br/>
<!-- <button id= "previousButtonID" name="previousQuestion"
value="Previous Question" class="navButtons"
onclick="setQuestionsAndOptions(this.id)">Previous Question </button>
<button id= "nextButtonID" name="nextQuestion" value="Next
Question" class="navButtons"
onclick="setQuestionsAndOptions(this.id)">Next Question </button> -->
</div>
</div>

<a class="button previousQuestion" id= "previousButtonID"


name="previousQuestion" onclick="setQuestionsAndOptions(this.id)">
<span> Previous</span>
</a>
<a class="button nextQuestion" id= "nextButtonID"
name="nextQuestion" onclick="setQuestionsAndOptions(this.id)">
<span>next</span>
</a>

<div class= "starDesign" id= "star"> </div>


<h2 class= "finalScore"> </h2>

<a class="button replayButton" id= "replayButton"


name="nextQuestion" onclick="refreshPage()">
<span>Replay</span>
</a>
</section>
</div>
<section id="one">
</section>

<div class="background">
</div>

</section>
</article>

CSS
body {
margin-top: 100px;
padding: 0;
font-family: Quicksand;
}

nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: 0.3s;
}

nav.black {
background: rgba(0, 0, 0, 0.8);
height: 100px;
padding: 10px 100px;
}

nav .logo {
padding: 22px 20px;
height: 80px;
float: left;
font-size: 24px;
transition: 0.3s;
}

nav .logo:hover {
color: white;
list-style: none;
}

nav.black .logo {
color: #fff;
}

nav.black .logo:hover {
color: #ffd9aa;
}

nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}

nav ul li {
list-style: none;
}

nav ul li a {
line-height: 80px;
color: #151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}

nav ul li a:hover {
color: white;
list-style: none;
}

nav.black ul li a {
color: #fff;
}

nav.black ul li a:hover {
color: #ffd9aa;
}

nav ul li a:focus {
outline: none;
}

nav ul li a.active {
background: #2b5775;
color: #ffff;
border-radius: 6px;
}

nav ul li a.active:hover {
color: black;
background: white;
}

.background {
editor/#e01d00+13,2b5775+61,ffd9aa+99 */
background: rgb(224,29,0); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(224,29,0,1) 13%,
rgba(43,87,117,1) 61%, rgba(255,217,170,1) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(224,29,0,1)
13%,rgba(43,87,117,1) 61%,rgba(255,217,170,1) 99%); /* Chrome10-
25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(224,29,0,1)
13%,rgba(43,87,117,1) 61%,rgba(255,217,170,1) 99%); /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#e01d00',
endColorstr='#ffd9aa',GradientType=1 ); /* IE6-9 fallback on horizontal
gradient */
position: fixed;
width: 100%;
height: 420%;
top: 0;
left: 0;
z-index: -1;
}

.question
{
background: #2b5775;
text-align: justify;
font-size: 25px;
color: white;
font-family: "Roboto", sans-serif;
margin: 10px auto;
padding: 30px;
border-radius: 6px;
box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.25);
font-weight: 50;
width: 83%;
height: 112px;
}

.buttons
{
text-align: center;
padding: 0px;
size: 50%;
font-size: 110px;
font-family: "Roboto", sans-serif;

}
/*
.answer
{
width: 200px;
height: 100px;
cursor: pointer;
border-radius: 25px;
border: 2px solid black;
font-size: 20px;
} */

.answer
{
width: 270px;
height: 100px;
padding: 15px 25px;
font-size: 25px;
color: black;
text-align: center;
background-color: #E8E8E8;
border-radius: 15px;
box-shadow: 0 9px #999;
font-family: "Roboto", sans-serif;
cursor: pointer;
}

/* .defaultAnswerColour
{
color: black;
} */

.answer:not(.nohover):hover
{
background-color: white;
color: black;
transition: 0.2s;
}
.navButtons
{
cursor: pointer;
width: 130px;
height: 30px;
border-radius: 10px;
border: 2px solid red;

.score{
padding-top: 25px;
}

.score, .quesitonNum
{
text-align: right;
padding-right: 30%;
font-size: 20px;
}

.starDesign
{
position: absolute;
left: 18%;
top: 40%;
}

.finalScore
{
font-size: 150px;
font-family: Roboto, sans-serif;
top: 45%;
left: 42%;
position: absolute;
}

/* .replayButton
{
position: absolute; left: 60%; top: 68%; margin: -<half height of image> 0
0 -<half width of image>;
cursor: pointer;
} */

#q4Image
{
position: relative;
display: block;
margin: 0 auto;
text-align: center;
width: 100px;
height: 200px;
border: 1px solid #021a40;
box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.25);
}

#q16Image
{
position: relative;
display: block;
margin: 0 auto;
text-align: center;
border: 1px solid #021a40;
width: 300px;
height: 300px;
box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.25);
}

.nextQuestion
{
top: 42%;
right: 7%;
}

.previousQuestion
{
top: 42%;
left: 7%;
}

.replayButton
{
top: 84.5%;
right: 7%;
}

.button {
position: absolute;

display: inline-block;
margin: 0 auto;

-webkit-border-radius: 10px;

-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

-webkit-transition: -webkit-box-shadow .1s ease-in-out;


}

.button span {
background-color: #E8E8E8;
width: 100px;
text-align: center;

background-image:

-webkit-box-shadow:
0px -1px #fff, /* top highlight */
0px 1px 1px #FFFFFF; /* bottom edge */

-webkit-background-size: 100%, 100%, 100%, 4px 4px;

-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;

display: inline-block;
padding: 10px 40px 10px 40px;

color: #2b5775;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
font-weight: 700;
font-size: 32px;

text-shadow: 0px 1px #fff, 0px -1px #262F33;


}

.button span:hover {
color: #ffd9aa ;
cursor: pointer;
transition: 0.2s;

.button:active {
-webkit-box-shadow:
0px 3px rgba(128,128,128,1),
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}

.button:active span{
-webkit-transform: translate(0, 5px); /* depth of button press
*/
}

#replayButton.button span:after {
display: block;
width: 10px;
height: 10px;

position: absolute;
right: 14px;
top: 12px;

font-family: 'Cabin';
font-weight: 700;
color: #2b5775;
text-shadow: 0px 1px #fff, 0px -1px black;
font-size: 26px;
}

#nextButtonID.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;

position: absolute;
right: 14px;
top: 12px;

font-family: 'Cabin';
font-weight: 700;
color: #2b5775 ;
text-shadow: 0px 1px #fff, 0px -1px black;
font-size: 26px;
}

#previousButtonID.button span:after {
content: "<";
display: block;
width: 10px;
height: 10px;

position: absolute;
left: 14px;
top: 12px;

font-family: 'Cabin';
font-weight: 700;
color: #2b5775;
text-shadow: 0px 1px #fff, 0px -1px black;
font-size: 26px;
}

/* .rightAnswerSelected
{
color: #7c7c7d;
} */

/*--- Media Queries --*/


@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}

JAVA SCRIPT
$(window).scroll(function(e) {
parallax();
});

function parallax() {
var scrolled = $(window).scrollTop();
$(".background").css("top", -(scrolled * 0.15) + "px");
}

$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$("nav").addClass("black");
} else {
$("nav").removeClass("black");
}
});

var score = 0;

var pos = 1;

// comment a//
var question1 = { QuestionNum: "1",
QuestionText: "Tina's score on her midterm exam was at
the 50th percentile. The grades were normally distributed. The exam
average was 78 and the standard deviation was 6. What was Tina's score
on the exam?",
option1: "90",
option2: "50",
option3: "84",
option4: "78",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 1};

// comment b //
var question2 = { QuestionNum: "2",
QuestionText: "If 3,500 people took the achievement
test, how many scored lower than the 98th percentile?",
option1: "70",
option2: "3430",
option3: "3420",
option4: "2%",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};

// comment answer c //
var question3 = { QuestionNum: "3",
QuestionText: "Which of the following indicates the
strongest relationship?",
option1: "r= 0.5",
option2: "r= 0.09",
option3: "r= -0.6",
option4: "r^2= 0.2",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 3};

// comment answer b //
var question4 = { QuestionNum: "4",
img: "https://image.ibb.co/dayohx/q4.png",
QuestionText: "What is the correlation between the
following z-scores?",
option1: "-0.79",
option2: "0.79",
option3: "0.97",
option4: "-0.97",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};

//comment answer d //
var question5 = { QuestionNum: "5",
QuestionText: "If the correlation coefficient is 0.8, the
percentage of variation in the response variable explained by the
variation in the explanatory variable is",
option1: "0.80%",
option2: "80%",
option3: "0.64%",
option4: "64%",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 4};

// comment answer c //
var question6 = { QuestionNum: "6",
QuestionText: "If the coefficient of determination is a
positive value, then the regression equation has a",
option1: "positive slope",
option2: "negative slope",
option3: "+ or - slope",
option4: "positive y intercept",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 3};

// answer b //
var question7 = { QuestionNum: "7",
QuestionText: "In regression, the equation that describes
how the response variable (y) is related to the explanatory variable (x)
is:",
option1: "the correlation model",
option2: "the regression model",
option3: "used to find r",
option4: "None of these",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};

// answer b //
var question8 = { QuestionNum: "8",
QuestionText: "Probability distribution having shape of bell
and in which values of mean lies in center of probability distribution is
classified as",
option1: "continuous",
option2: "normal",
option3: "discrete",
option4: "hyper geometric",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};

// answer c//
var question9 = { QuestionNum: "9",
QuestionText: "In normal distribution, normal curve becomes
more wider and more flatter because of",
option1: "<variance",
option2: ">variance",
option3: ">standard deviation",
option4: "<standard deviation",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 3};
// answer a //
var question10 = { QuestionNum: "10",
QuestionText: "Successful life of product, time, weight and
height are classified as which of the following variable types",
option1: "continuous random",
option2: "discrete random",
option3: "continuous time",
option4: "none of these",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 1};

// answer b //
var question11 = { QuestionNum: "11",
QuestionText: "Considering normal distribution, spread is
decreased and height of curve is increased for the",
option1: ">standard deviation",
option2: "<standard deviation",
option3: "<variance",
option4: ">variance",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};

// answer c //
var question12 = { QuestionNum: "12",
QuestionText: "If the probability of a machine producing a
defective part is 0.05, what is the probability of finding exactly 5 defective
parts from a sample of 100? (Assume that the process follows a binomial
distribution and round answer to four places.)",
option1: "0.0500",
option2: "0.0900",
option3: "0.1800",
option4: "0.5000",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 3};

// answer a //
var question13 = { QuestionNum: "13",
QuestionText: "Which of the following is not commonly
referred to as a measure of central tendency for the normal distribution?",
option1: "midrange",
option2: "mean",
option3: "median",
option4: "none of the above",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 1};

// answer a //
var question14 = { QuestionNum: "14",
QuestionText: "Which of the following is not true of the
normal distribution curve?",
option1: "it is asymmetrical",
option2: "it is bell-shaped",
option3: "it is linear",
option4: "it is symmetrical",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 1};

// answer d //
var question15 = { QuestionNum: "15",
QuestionText: " Question 10. Rank the score of 8 in the
following set: 2; 7; 1; 8; 4; 2; 7; 10; 20:",
option1: "5",
option2: "8",
option3: "3",
option4: "7",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 4};

// answer d //
// IMAGE Q1 OF DOCUMENT PDF //
var question16 = { QuestionNum: "16",
img: "https://image.ibb.co/fEgPNx/q16.png",
QuestionText: "Refer to the Venn diagram below. What is the
probability that a student plays football or baseball?",
option1: "3/5",
option2: "7/16",
option3: "7/10",
option4: "28/33",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 4};

// answer a //
var question17 = { QuestionNum: "17",
QuestionText: "Out of 28 students, 12 have at least one
brother and 13 have at least one sister. Eight students have both brothers
and sisters. How many students do not have either a brother or a sister?",
option1: "11",
option2: "5",
option3: "4",
option4: "8",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 1};

// answer b //
var question18 = { QuestionNum: "18",
QuestionText: "If the coefficient of determination is 0.81, the
correlation coefficient is",
option1: " 0.6561",
option2: "either +0.9 or -0.9",
option3: "positive",
option4: "negative",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};

// answ b //
var question19 = { QuestionNum: "19",
QuestionText: "A a card is selected from a deck of 52 cards.
Find the probability that it is a red king or a black queen",
option1: "8/13",
option2: "1/13",
option3: "5/13",
option4: "2/13",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 2};
// answer a //
var question20 = { QuestionNum: "20",
QuestionText: "Regression analysis was applied between $
sales (y) and $ advertising (x) across all the branches of a major
international corporation. The following regression function was obtained.
y = 5000 + 7.25x. If the advertising budgets of two branches of the
corporation differ by $30,000, then what will be the predicted difference in
their sales?",
option1: "$217,500",
option2: "$222,500",
option3: "$5000",
option4: "$7.25",
selectedOption1: "",
selectedOption2: "",
selectedOption3: "",
selectedOption4: "",
rightAnswer: 1};

var totalNumOfQuestions = 20;

runFirstQuestoin();

function runFirstQuestoin()
{
// used to calculate the final score

document.getElementById("question").innerHTML =
question1.QuestionText;
document.getElementById("answer1").value = question1.option1;
document.getElementById("answer2").value = question1.option2;
document.getElementById("answer3").value = question1.option3;
document.getElementById("answer4").value = question1.option4;

// depending on the qustion number the background of each button is


modified so that
// when the user pressed on one it will colour up depending if it is right
answer or not
setButtonsBackgroundDependingOnQuestion(1);
document.getElementById("previousButtonID").disabled= true;
}

function chooseRightSetQuestion(pos)
{
switch (pos)
{
case 1:
setOptionsOfCurrentQuestion(question1);
break;
case 2:
setOptionsOfCurrentQuestion(question2);
break;
case 3:
setOptionsOfCurrentQuestion(question3);
break;
case 4:
setOptionsOfCurrentQuestion(question4);
break;
case 5:
setOptionsOfCurrentQuestion(question5);
break;
case 6:
setOptionsOfCurrentQuestion(question6);
break;
case 7:
setOptionsOfCurrentQuestion(question7);
break;
case 8:
setOptionsOfCurrentQuestion(question8);
break;
case 9:
setOptionsOfCurrentQuestion(question9);
break;
case 10:
setOptionsOfCurrentQuestion(question10);
break;
case 11:
setOptionsOfCurrentQuestion(question11);
break;
case 12:
setOptionsOfCurrentQuestion(question12);
break;
case 13:
setOptionsOfCurrentQuestion(question13);
break;
case 14:
setOptionsOfCurrentQuestion(question14);
break;
case 15:
setOptionsOfCurrentQuestion(question15);
break;
case 16:
setOptionsOfCurrentQuestion(question16);
break;
case 17:
setOptionsOfCurrentQuestion(question17);
break;
case 18:
setOptionsOfCurrentQuestion(question18);
break;
case 19:
setOptionsOfCurrentQuestion(question19);
break;
case 20:
setOptionsOfCurrentQuestion(question20);
break;

}
}

console.log(pos);
function setQuestionsAndOptions(passedID)
{
for (i=0; i < 4 ; i++)
{
document.getElementsByClassName("answer")
[i].classList.remove("nohover");
document.getElementsByClassName("answer")
[i].classList.remove("rightAnswerSelected");
}

runBeforeSettingBg();

chooseRightSetQuestion(pos);

if (passedID == "nextButtonID")
{
pos++;
document.getElementById("previousButtonID").disabled= false;
}
else if (passedID == "previousButtonID")
{
pos--;
if (pos==0)
{
document.getElementById("previousButtonID").disabled= true;
pos = 1;
return;
}
}

document.querySelector(".questionNumVal").innerHTML = pos;
console.log("this is the pos: " + pos);
switch (pos)
{

case 1:
setQuestionAndOptions(question1,1);
break;

case 2:
setQuestionAndOptions(question2,2);
break;

case 3:
if(document.getElementById("q4Image"))
document.getElementById("q4Image").remove();
setQuestionAndOptions(question3,3);
break;

case 4:
addQuestionImage(question4.img);
setQuestionAndOptions(question4,4);
break;

case 5:
if(document.getElementById("q4Image"))
document.getElementById("q4Image").remove();
setQuestionAndOptions(question5,5);
break;

case 6:
setQuestionAndOptions(question6,6);
break;

case 7:
setQuestionAndOptions(question7,7);
break;

case 8:
setQuestionAndOptions(question8,8);
break;

case 9:
setQuestionAndOptions(question9,9);
break;

case 10:
setQuestionAndOptions(question10,10);
break;

case 11:
setQuestionAndOptions(question11,11);
break;

case 12:
setQuestionAndOptions(question12,12);
break;

case 13:
setQuestionAndOptions(question13,13);
break;

case 14:
setQuestionAndOptions(question14,14);
break;

case 15:
if(document.getElementById("q16Image"))
document.getElementById("q16Image").remove();
setQuestionAndOptions(question15,15);
break;

case 16:
setQuestionAndOptions(question16,16);
addQuestionImage(question16.img);
break;

case 17:
if(document.getElementById("q16Image"))
document.getElementById("q16Image").remove();
setQuestionAndOptions(question17,17);
break;

case 18:
setQuestionAndOptions(question18,18);
break;

case 19:
setQuestionAndOptions(question19,19);
break;

case 20:
setQuestionAndOptions(question20,20);
break;

default:
document.querySelector(".questionNumVal").innerHTML = "20";
showFinalScore();
}
}

function addQuestionImage(imageSrc)
{
var x = document.createElement("IMG");

if(imageSrc == question16.img )
x.setAttribute('id','q16Image')
else if (imageSrc == question4.img)
x.setAttribute('id','q4Image')

x.setAttribute("src", imageSrc);
// div.appendChild(x);
document.getElementById("questionImage").appendChild(x);
}

function setQuestionAndOptions(question, caseNum)


{
console.log(pos);
reset();
console.log(caseNum);
document.getElementById("question").innerHTML =
question.QuestionText;
document.getElementById("answer1").value = question.option1;
document.getElementById("answer2").value = question.option2;
document.getElementById("answer3").value = question.option3;
document.getElementById("answer4").value = question.option4;
setButtonsBackgroundDependingOnQuestion(caseNum);
setBackgroundDependingOnOptionValues(question);
}

function runBeforeSettingBg()
{
if (pos == 1 )
{
setbgBefore(question1);
}
else if ( pos == 2)
{
setbgBefore(question2);
}
else if ( pos == 3)
{
setbgBefore(question3);
}
}
function reset()
{
for (i=0; i < 4 ; i++)
{
document.getElementsByClassName("answer")[i].disabled= false;
document.getElementsByClassName("answer")
[i].style.backgroundColor = "";
}
}

function setOptionsOfCurrentQuestion(currentQuestion)
{
currentQuestion.selectedOption1 =
document.getElementById("answer1").style.backgroundColor;
currentQuestion.selectedOption2 =
document.getElementById("answer2").style.backgroundColor;
currentQuestion.selectedOption3 =
document.getElementById("answer3").style.backgroundColor;
currentQuestion.selectedOption4 =
document.getElementById("answer4").style.backgroundColor;
}

function setbgBefore(currentQuestion)
{
if (currentQuestion.selectedOption1 == "green" ||
currentQuestion.selectedOption2 == "green" ||
currentQuestion.selectedOption3 == "green" ||
currentQuestion.selectedOption4 == "green")
{
for (i=0; i < 4 ; i++)
{
document.getElementsByClassName("answer")[i].disabled= true;
}
}

if (currentQuestion.selectedOption1 == "green" ||
currentQuestion.selectedOption1 == "red")
{
document.getElementById("answer1").style.backgroundColor =
currentQuestion.selectedOption1;
}

if (currentQuestion.selectedOption2 == "green" ||
currentQuestion.selectedOption2 == "red")
{
document.getElementById("answer2").style.backgroundColor =
currentQuestion.selectedOption2;
}
if (currentQuestion.selectedOption3 == "green" ||
currentQuestion.selectedOption3 == "red")
{
document.getElementById("answer3").style.backgroundColor =
currentQuestion.selectedOption3;
}
if (currentQuestion.selectedOption4 == "green" ||
currentQuestion.selectedOption4 == "red")
{
document.getElementById("answer4").style.backgroundColor =
currentQuestion.selectedOption4;
}

function setBackgroundDependingOnOptionValues(currentQuestion)
{
if (currentQuestion.selectedOption1 == "green" ||
currentQuestion.selectedOption2 == "green" ||
currentQuestion.selectedOption3 == "green" ||
currentQuestion.selectedOption4 == "green")
{
for (i=0; i < 4 ; i++)
{
document.getElementsByClassName("answer")[i].disabled= true;
}
}

document.getElementById("answer1").style.backgroundColor =
currentQuestion.selectedOption1;
document.getElementById("answer2").style.backgroundColor =
currentQuestion.selectedOption2;
document.getElementById("answer3").style.backgroundColor =
currentQuestion.selectedOption3;
document.getElementById("answer4").style.backgroundColor =
currentQuestion.selectedOption4;
}

function setButtonsBackgroundDependingOnQuestion(questionNum)
{
switch(questionNum)
{
case 1:

setButtonsBackgroundDependingOnOption(question1.rightAnswer);
break;
case 2:

setButtonsBackgroundDependingOnOption(question2.rightAnswer);
break;
case 3:

setButtonsBackgroundDependingOnOption(question3.rightAnswer);
break;
case 4:

setButtonsBackgroundDependingOnOption(question4.rightAnswer);
break;
case 5:

setButtonsBackgroundDependingOnOption(question5.rightAnswer);
break;
case 6:

setButtonsBackgroundDependingOnOption(question6.rightAnswer);
break;
case 7:

setButtonsBackgroundDependingOnOption(question7.rightAnswer);
break;
case 8:

setButtonsBackgroundDependingOnOption(question8.rightAnswer);
break;
case 9:

setButtonsBackgroundDependingOnOption(question9.rightAnswer);
break;

case 10:

setButtonsBackgroundDependingOnOption(question10.rightAnswer);
break;

case 11:

setButtonsBackgroundDependingOnOption(question11.rightAnswer);
break;

case 12:

setButtonsBackgroundDependingOnOption(question12.rightAnswer);
break;

case 13:
setButtonsBackgroundDependingOnOption(question13.rightAnswer);
break;

case 14:

setButtonsBackgroundDependingOnOption(question14.rightAnswer);
break;

case 15:

setButtonsBackgroundDependingOnOption(question15.rightAnswer);
break;

case 16:

setButtonsBackgroundDependingOnOption(question16.rightAnswer);
break;

case 17:

setButtonsBackgroundDependingOnOption(question17.rightAnswer);
break;

case 18:

setButtonsBackgroundDependingOnOption(question118.rightAnswer);
break;

case 19:

setButtonsBackgroundDependingOnOption(question19.rightAnswer);
break;

case 20:

setButtonsBackgroundDependingOnOption(question20.rightAnswer);
break;

default:
}
}

function setButtonsBackgroundDependingOnOption(correctOption)
{
switch (correctOption) {
case 1:
document.getElementById('answer1').onclick = function()
{rightAnswer("answer1");}; // a
document.getElementById('answer2').onclick = function()
{wrongAnswer("answer2");};
document.getElementById('answer3').onclick = function()
{wrongAnswer("answer3");};
document.getElementById('answer4').onclick = function()
{wrongAnswer("answer4");};
break;

case 2:
document.getElementById('answer1').onclick = function()
{wrongAnswer("answer1");};
document.getElementById('answer2').onclick = function()
{rightAnswer("answer2");}; // b
document.getElementById('answer3').onclick = function()
{wrongAnswer("answer3");};
document.getElementById('answer4').onclick = function()
{wrongAnswer("answer4");};
break;

case 3:
document.getElementById('answer1').onclick = function()
{wrongAnswer("answer1");};
document.getElementById('answer2').onclick = function()
{wrongAnswer("answer2");};
document.getElementById('answer3').onclick = function()
{rightAnswer("answer3");}; // c
document.getElementById('answer4').onclick = function()
{wrongAnswer("answer4");};
break;

case 4:
document.getElementById('answer1').onclick = function()
{wrongAnswer("answer1");};
document.getElementById('answer2').onclick = function()
{wrongAnswer("answer2");};
document.getElementById('answer3').onclick = function()
{wrongAnswer("answer3");};
document.getElementById('answer4').onclick = function()
{rightAnswer("answer4");}; // d
break;
}
}

var div = document.getElementById("star");

function wrongAnswer(name)
{
document.getElementsByName(name)[0].style.backgroundColor =
"red";
document.getElementsByName(name)[0].style.color = "black";
calculateScore(-2);
document.getElementsByName(name)[0].disabled= true;
}

function rightAnswer(name)
{
document.getElementsByName(name)[0].style.backgroundColor =
"green";
document.getElementsByName(name)[0].style.color = "black";
calculateScore(10);
for (i=0; i < 4 ; i++)
{
document.getElementsByClassName("answer")
[i].classList.add("nohover");
document.getElementsByClassName("answer")[i].disabled= true;
}

function calculateScore(score)
{
this.score += score;
if (score < 0)
{
document.querySelector(".score").style.color = "red";
}
else
{
document.querySelector(".score").style.color = "green";
}

document.querySelector(".scoreVal").innerHTML = this.score;

function showFinalScore()
{

var percentage = Math.round((score/(totalNumOfQuestions*10)) *


100);

// for (i=0; i < 4 ; i++)


// {
// document.getElementsByClassName("answer")[i].style.visibility=
"hidden";
// }
// document.getElementsByClassName("navButtons")
[0].style.visibility= "hidden";
// document.getElementsByClassName("navButtons")
[1].style.visibility= "hidden";
// document.getElementsByClassName("score")[0].style.visibility=
"hidden";
// document.getElementsByClassName("question")[0].style.visibility=
"hidden";
var audio = document.getElementById("myAudio");
document.getElementById("answer1").outerHTML='';
document.getElementById("answer2").outerHTML='';
document.getElementById("answer3").outerHTML='';
document.getElementById("answer4").outerHTML='';
document.getElementById("previousButtonID").outerHTML='';
document.getElementById("nextButtonID").outerHTML='';
document.getElementById("question").outerHTML='';

if (percentage < 0)
{
percentage = 0;
}

if (percentage >= 90 )
{
// 5 stars
makeStars(5);
audio.play();

else if (percentage >= 80)


{
// 4 stars
makeStars(4);
makeEmptyStars(1);
}
else if (percentage >= 70)
{
// 3 stars
makeStars(3);
makeEmptyStars(2);
}
else if (percentage >= 60)
{
// 2 stars
makeStars(2);
makeEmptyStars(3);
}
else if (percentage <= 50 && percentage != 0)
{
// 1 star
makeStars(1);
makeEmptyStars(4);
}
else if (percentage == 0)
{
makeEmptyStars(5);
}

document.querySelector(".finalScore").innerHTML = percentage +
"%";

// replay button
showReplayButton();

function showReplayButton()
{
document.getElementById("replayButton").disabled = false;
}

function makeStars(numOfStars)
{
for (i=1; i <= numOfStars ; i++)
{
var x = document.createElement("IMG");
x.setAttribute("src", "https://image.ibb.co/epNjpc/star.png");
x.setAttribute("width", "180");
x.setAttribute("height", "150");

x.setAttribute("margin-left", "auto");
x.setAttribute("margin-right", "auto");

div.appendChild(x);
}
}

function makeEmptyStars(numOfStars)
{
for (i=1; i <= numOfStars ; i++)
{
var x = document.createElement("IMG");
x.setAttribute("src", "https://image.ibb.co/iYsfUc/empty_star.png");
x.setAttribute("width", "180");
x.setAttribute("height", "150");

x.setAttribute("margin-left", "auto");
x.setAttribute("margin-right", "auto");
div.appendChild(x);
}
}

function refreshPage()
{
location.reload();
}

You might also like