this is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Oxford Languages Center</title>
<link rel="stylesheet" href="Quiz.css">
</head>
<body>
<main class="main">
<header class="header">
<a href="#" class="logo"><img src="logo1.png"></a>
<nav class="navbar">
<a href="#" class="active">Oxford Languages Center</a>
</nav>
</header>
<div class="container">
<section class="quiz-section">
<div class="quiz-box">
<h1 id="pl">Placement Test</h1>
<div class="quiz-header">
<span id="en">English Test</span>
<span class="header-score">Score: 0 / 54</span>
</div>
<h2 class="question-text">Are you ______?</h2>
<div class="option-list">
<!--<div class="option">
<span>AA</span>
</div>
<div class="option"></div>
<span>BB</span>
</div>
<div class="option">
</div>
<span>CC</span>
</div>
<div class="option"></div>
<span>DD</span>
</div>-->
</div>
<div class="quiz-footer">
<span class="question-total">1 of 54 Questions </span>
<button class="next-btn">Next</button>
</div>
</div>
<div class="result-box">
<h2>Test Result!</h2>
<div class="percentage-container">
<div class="circular-progress">
<span class="progress-value">0%</span>
</div>
<span class="score-text">Your Score 0 out of 54</span>
</div>
<div class="buttons">
<button class="tryAgain-btn">Try Again</button>
<button class="goHome-btn">Go To Home</button>
</div>
</div>
</section>
<section class="home">
<div class="home-content">
<h1>PLACEMENT TEST</h1>
<p>English</p>
<button class="start-btn">Start Test</button>
<br>
<button class="start-btn" onclick="location.href='aaaaa.html'">Start Listening</button>
</div>
</div>
</section>
</main>
<div class="popup-info">
<h2>Questions</h2>
<span class="info">Choose the correct answer</span>
<div class="btn-group">
<button class="info-btn exit-btn">Exit Test</button>
<a href="#" class="info-btn continue-btn">Continue</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="questions.js"></script>
</body>
</html>
this is questions.js
let questions = [
{
numb: 1,
question: "Are you ______?",
answer: "British",
options: [
"British",
"Tunisia",
"Wales",
"England"
]
},
{
numb: 2,
question: "Where ______ work?",
answer: "does your brother",
options: [
"do your brother",
"is your brother",
"your brother",
"does your brother"
]
},
{
numb: 3,
question: "They ______ a wonderful concert last week.",
answer: "saw",
options: [
"see",
"have seen",
"seeing",
"saw"
]
},
{
numb: 4,
question: "They were ______ work last Saturday.",
answer: "at",
options: [
"at",
"on",
"in",
"by"
]
},
{
numb: 5,
question: "Does she ______ a lot of hobbies?",
answer: "have",
options: [
"Is",
"got",
"has",
"have"
]
},
{
numb: 6,
question: "11h45 is ______.",
answer: "quarter to twelve",
options: [
"quarter past eleven",
"half past eleven",
"quarter to twelve",
"half fast twelve"
]
},
{
numb: 7,
question: "The Piccadilly bus ______ now.",
answer: "is leaving",
options: [
"leaves",
"are living",
"leaving",
"is leaving"
]
},
{
numb: 8,
question: "Where ______ tonight?",
answer: "are we going",
options: [
"are we going",
"we go",
"go we",
"we going"
]
},
{
numb: 9,
question: "Your room is upstairs ______ the left.",
answer: "on",
options: [
"On",
"in",
"near",
"at"
]
},
{
numb: 10,
question: "What ______ rooms!",
answer: "an empty",
options: [
"an empty",
"a empty",
"empty",
"emptiness"
]
},
{
numb: 11,
question: "This is the ______ skyscraper in the world.",
answer: "biggest",
options: [
"big",
"bigger",
"most big",
"biggest"
]
},
{
numb: 12,
question: "She ______ soda.",
answer: "often drinks",
options: [
"often drinks",
"often drinking",
"drinks often",
"is often drink"
]
},
{
numb: 13,
question: "The girl ______ dad is a scientist is very clever.",
answer: "whose",
options: [
"which",
"whom",
"who",
"whose"
]
},
{
numb: 14,
question: "Miss Johnson is my ______ secretary.",
answer: "father's",
options: [
"father",
"fathers'",
"father's",
"fathers"
]
},
{
numb: 15,
question: "You're British, ______?",
answer: "aren't you",
options: [
"are you",
"aren't you",
"you are",
"you aren't"
]
},
{
numb: 16,
question: "My result is ______ than yours.",
answer: "better",
options: [
"good",
"better",
"more good",
"more better"
]
},
{
numb: 17,
question: "I ______ of a number between 1 and 10. What ______ it be?",
answer: "am thinking.../...would",
options: [
"think.../...does",
"think.../...would",
"was thinking.../...will",
"am thinking.../...could"
]
},
{
numb: 18,
question: "You speak English ______ I do.",
answer: "as well as",
options: [
"as well",
"good as",
"as good",
"as well as"
]
},
{
numb: 19,
question: "Catherine wasn't impressed by either of her ______ behavior.",
answer: "sister's",
options: [
"sister's",
"sisters",
"sisters'",
"sister"
]
},
{
numb: 20,
question: "He met neither John ______ his wife.",
answer: "nor",
options: [
"or",
"also",
"nor",
"and"
]
},
{
numb: 21,
question: "I'm looking forward ______ you.",
answer: "to seeing",
options: [
"to see",
"to seeing",
"seeing",
"see"
]
},
{
numb: 22,
question: "I ______ since Tuesday!",
answer: "haven't slept",
options: [
"slept",
"has slept",
"haven't slept",
"sleep"
]
},
{
numb: 23,
question: "'Eventually' means ______.",
answer: "Finally",
options: [
"Firstly",
"Actually",
"Likely",
"Finally"
]
},
{
numb: 24,
question: "______ her last week?",
answer: "Did you invite",
options: [
"You invited",
"Did you invited",
"Do you invite",
"Did you invite"
]
},
{
numb: 25,
question: "The thief ______ by the police 2 days ago.",
answer: "was caught",
options: [
"caught",
"was caught",
"catches",
"is caught"
]
},
{
numb: 26,
question: "If I ______ you, I would tell him the truth.",
answer: "were",
options: [
"am",
"was",
"were",
"'ll be"
]
},
{
numb: 27,
question: "______ they played very well, the English team lost the match.",
answer: "Although",
options: [
"Although",
"However",
"Nevertheless",
"In spite"
]
},
{
numb: 28,
question: "Stamps have cost 30p ______ the beginning of the year.",
answer: "since",
options: [
"while",
"since",
"occasionally",
"at"
]
},
{
numb: 29,
question: "If I had time, I ______ many things.",
answer: "would do",
options: [
"do",
"would do",
"did",
"'ve done"
]
},
{
numb: 30,
question: "Would you mind ______ the door?",
answer: "closing",
options: [
"close",
"to close",
"closing",
"closed"
]
},
{
numb: 31,
question: "You must ______ dive into shallow water.",
answer: "never",
options: [
"never",
"always",
"sometimes",
"constantly"
]
},
{
numb: 32,
question: "I forbid ______ the house dressed like that.",
answer: "you to leave",
options: [
"you from leaving",
"you leave",
"you to leave",
"to you of leaving"
]
},
{
numb: 33,
question: "The worker ignored his boss and ______.",
answer: "got fired",
options: [
"is getting sacked",
"got fired",
"is fired",
"is getting fired"
]
},
{
numb: 34,
question: "I haven't met her ______ 3 years",
answer: "for",
options: [
"since",
"ago",
"for",
"yet"
]
},
{
numb: 35,
question: "I would be very interested in ______ for that job.",
answer: "applying",
options: [
"entering",
"applying",
"working",
"writing"
]
},
{
numb: 36,
question: "______ someone means contacting him on the phone.",
answer: "Reaching",
options: [
"Finally finding",
"Putting you through",
"Reaching",
"I'm just checking"
]
},
{
numb: 37,
question: "______ please tell your children to stop shouting?",
answer: "Would you",
options: [
"May you",
"Would you",
"Ought you",
"Should you"
]
},
{
numb: 38,
question: "By Thursday, I ______ ten meetings.",
answer: "will have had",
options: [
"have had",
"will have had",
"was having",
"have"
]
},
{
numb: 39,
question: "______, not five but rather ten candidates were screened through telephone interviews.",
answer: "Actually",
options: [
"Considerably",
"Pleasantly",
"Actually",
"Leisurely"
]
},
{
numb: 40,
question: "Once you ______ the secret code, you must not reveal it to anyone.",
answer: "are given",
options: [
"are given",
"have given",
"gave",
"give"
]
},
{
numb: 41,
question: "This piece was composed by Stravinsky and consists ______ three movements.",
answer: "of",
options: [
"to",
"by",
"in",
"of"
]
},
{
numb: 42,
question: "______, business-class tickets on this flight are less expensive than economy fares.",
answer: "Oddly enough",
options: [
"In view of that fact",
"Oddly enough",
"By virtue of",
"Owing to"
]
},
{
numb: 43,
question: "I ______ on time if the bus hadn't been late.",
answer: "'d have been",
options: [
"have been",
"was",
"would be",
"'d have been"
]
},
{
numb: 44,
question: "Why didn't you ______ that you were feeling ill?",
answer: "mention",
options: [
"advise",
"remark",
"mention",
"tell"
]
},
{
numb: 45,
question: "Although our opinions on many things ______, we're good friends.",
answer: "differ",
options: [
"disagree",
"oppose",
"differ",
"divide"
]
},
{
numb: 46,
question: "You must try and hurry up because my patience is ______ out.",
answer: "running",
options: [
"running",
"pacing",
"racing",
"turning"
]
},
{
numb: 47,
question: "I alone am responsible ______ the mischief perpetrated last night.",
answer: "for",
options: [
"to",
"with",
"of",
"for"
]
},
{
numb: 48,
question: "This supermarket is trying to ______ young shoppers by offering fashionable clothes.",
answer: "attract",
options: [
"target",
"encourage",
"persuade",
"attract"
]
},
{
numb: 49,
question: "______ means there are no tickets left.",
answer: "Sold out",
options: [
"Sold out",
"Front row",
"Free seats",
"Window shopping"
]
},
{
numb: 50,
question: "Everyone ______ that gentlemen ______ blondes",
answer: "says.../...prefer",
options: [
"say.../...prefers",
"say.../...prefer",
"says.../...prefer",
"says.../...prefers"
]
},
{
numb: 51,
question: "As so few members had turned up at the meeting, it was decided to ______ it until further notice.",
answer: "postpone",
options: [
"delay",
"postpone",
"wait",
"hold"
]
},
{
numb: 52,
question: "I strongly ______ investing in these shares because you will get a very good reward.",
answer: "recommend",
options: [
"recommend",
"commend",
"order",
"respond"
]
},
{
numb: 53,
question: "I have tried and tried again and no matter what I do it still shows 'error', I just can't ______ what's wrong",
answer: "figure out",
options: [
"look out",
"figure out",
"check out",
"bring out"
]
},
{
numb: 54,
question: "The question is whether it is ______ to sell up all your shares at this stage rather than wait",
answer: "wise",
options: [
"wisdom",
"wisely",
"wise",
"wisest"
]
},
];
let questionCount = 0;
let questionNumb = 1;
let userScore = 0;
const startBtn = document.querySelector('.start-btn');
const popupInfo = document.querySelector('.popup-info');
const exitBtn = document.querySelector('.exit-btn');
const main = document.querySelector('.main');
const continueBtn = document.querySelector('.continue-btn');
const quizSection = document.querySelector('.quiz-section');
const quizBox = document.querySelector('.quiz-box');
const resultBox = document.querySelector('.result-box');
const tryAgainBtn = document.querySelector('.tryAgain-btn');
const goHomeBtn = document.querySelector('.goHome-btn');
const nextBtn = document.querySelector('.next-btn');
const optionList = document.querySelector('.option-list');
startBtn.onclick = () => {
popupInfo.classList.add('active');
main.classList.add('active');
}
exitBtn.onclick = () => {
popupInfo.classList.remove('active');
main.classList.remove('active');
}
continueBtn.onclick = () => {
quizSection.classList.add('active');
popupInfo.classList.remove('active');
main.classList.remove('active');
quizBox.classList.add('active');
showQuestions(questionCount);
questionCounter(questionNumb);
headerScore();
}
tryAgainBtn.onclick = () => {
quizBox.classList.add('active');
nextBtn.classList.remove('active');
resultBox.classList.remove('active');
questionCount = 0;
questionNumb = 1;
userScore = 0;
showQuestions(questionCount);
questionCounter(questionNumb);
headerScore();
}
goHomeBtn.onclick = () => {
quizSection.classList.remove('active');
nextBtn.classList.remove('active');
resultBox.classList.remove('active');
questionCount = 0;
questionNumb = 1;
userScore = 0;
showQuestions(questionCount);
questionCounter(questionNumb);
}
nextBtn.onclick = () => {
if (questionCount < questions.length - 1) {
questionCount++;
showQuestions(questionCount);
questionNumb++;
questionCounter(questionNumb);
nextBtn.classList.remove('active');
} else {
showResultBox();
console.log("ok");
}
}
function showQuestions(index) {
const questionText = document.querySelector('.question-text');
questionText.textContent = `${questions[index].numb}. ${questions[index].question}`;
let optionTag = '';
questions[index].options.forEach((option, i) => {
optionTag += `<div class="option" onclick="optionSelected(this)"><span>${option}</span></div>`;
});
optionList.innerHTML = optionTag;
}
function optionSelected(answer) {
const userAnswer = answer.textContent.trim();
const correctAnswer = questions[questionCount].answer;
if (userAnswer === correctAnswer) {
answer.classList.add('correct');
userScore++;
headerScore();
nextBtn.classList.add('active');
} else {
answer.classList.add('incorrect');
// Auto select the correct answer
[...optionList.children].forEach(option => {
if (option.textContent.trim() === correctAnswer) {
option.classList.add('correct');
}
option.classList.add('disabled');
});
nextBtn.classList.add('active');
}
}
function questionCounter(index) {
const questionTotal = document.querySelector('.question-total');
questionTotal.textContent = `${index} of ${questions.length} Questions`
}
function headerScore() {
const headerScoreText = document.querySelector('.header-score');
headerScoreText.textContent = `Score: ${userScore} / ${questions.length}`;
}
function showResultBox() {
quizBox.classList.remove('active');
resultBox.classList.add('active');
const scoreText = document.querySelector('.score-text');
scoreText.textContent = `Your Score ${userScore} out of ${questions.length}`;
const circularProgress = document.querySelector('.circular-progress');
const progressValue = document.querySelector('.progress-value');
let progressStartValue = -1;
const progressEndValue = (userScore / questions.length) * 100;
const speed = 20;
const progress = setInterval(() => {
progressStartValue++;
progressValue.textContent = `${progressStartValue}%`;
circularProgress.style.background = `conic-gradient(#c40094 ${ progressStartValue * 3.6}deg, rgba(255, 255, 255, .1) 0deg)`;
if (progressStartValue >= progressEndValue) {
clearInterval(progress);
}
}, speed);
const data = new FormData();
data.append('userScore', userScore);
fetch('update_score.php', {
method: 'POST',
body: data
})
.then(response => response.text())
.then(result => {
console.log(result); // Display the response from the PHP script
})
.catch(error => console.error('Error:', error));
}
this is update_score.php :
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
// Database connection parameters
$servername = "127.0.0.1";
$username = "root";
$password = "";
$dbname = "englishquizox";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// SQL to create the scores_table
$sql = "CREATE TABLE IF NOT EXISTS scores_table (
id INT AUTO_INCREMENT PRIMARY KEY,
tel VARCHAR(15) NOT NULL,
score INT NOT NULL,
FOREIGN KEY (tel) REFERENCES login_table(tel) ON DELETE CASCADE
)";
$conn->query($sql); // Create table without checking success here for simplicity
// Check if the user is logged in and the session variable exists
if (isset($_SESSION['tel'])) {
$tel = $_SESSION['tel'];
if (isset($_POST['userScore'])) {
$userScore = intval($_POST['userScore']); // Sanitize the score input
$sql = "INSERT INTO scores_table (tel, score) VALUES (?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("si", $tel, $userScore);
if ($stmt->execute()) {
echo "Score updated successfully.";
} else {
echo "Error updating score: " . $stmt->error;
}
$stmt->close();
} else {
echo "No score received.";
}
} else {
echo "User is not logged in.";
}
$conn->close();
?>
ignore the 56 questions classes, I want to send the score to a php file to insert it into a mysql table and the js file doesn’t seem to work fully like if i put some console.log statements the browser ignores them and deos everything else