关于服务器server.js启动html文件时 js脚本没有反应
如下代码 逻辑应该在点击start按钮后隐藏元素和显示元素但是并没有
这是Quit.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Quit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>MyWebsite</h1>
<img src="./img/school_logo.png" alt="school logo">
<nav>
<ul>
<li><a href="IntroductionPage.html">Home</a></li>
<li><a href="AboutPage.html">About me</a>
<div class="submenu">
<a href="#Interest">My Interest</a>
<a href="#Major">My Major</a>
<a href="#Resume">My Resume</a>
</div>
</li>
<li><a href="Quit.html">Quiz</a></li>
</ul>
</nav>
</header>
<main>
<article>
<div id="div1">
<h2>Welcome to quiz!</h2>
<label for="welcome">Give your name: </label>
<input type="text" id="welcome" name="welcome" required minlength="4" maxlength="8" size="10" />
<button type="button" onclick="show(); renewal()" id="btn1">start</button>
</div>
<div id="div2" style="display: none">
<h2 id="questionNo">Question</h2>
<label for="welcome" id="questionText"> ? </label>
<button type="button" onclick="selectionAnswer('A')" id="btn2">A</button>
<button type="button" onclick="selectionAnswer('B')" id="btn3">B</button>
<button type="button" onclick="selectionAnswer('C')" id="btn4">C</button>
<button type="button" onclick="selectionAnswer('D')" id="btn5">D</button>
<label id="timer">Time to answer: 15 seconds</label>
</div>
<div id="div3" style="display: none">
<h2 >Your answer is correct!</h2>
<button type="button" onclick="renewal()" id="btn6">Next question</button>
</div>
<div id="div4" style="display: none">
<h2>Your answer is incorrect!</h2>
<button type="button" onclick="renewal()" id="btn7">Next question</button>
</div>
<div id="div5" style="display: none">
<h2>You completed all the questions!</h2>
<label id="CorrectAnswer">You got 2 right out of 10.</label>
<label id="timeAnswered"></label>
<label id="output"></label>
</div>
</article>
</main>
<script src ="/socket.io/socket.io.js"></script>
<script src="public/quit.js"> </script>
<footer>
<p><a href="https://blog.csdn.net/weixin_74400487">My Blog</a> by Zheng Zihao.</p>
</footer>
</body>
</html>
这是server.js
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server);
const port = 3000;
app.use(express.static('public'));
let initialRanking = [];
const correctAnswers = {
1: "Mars",
2: "Canberra",
3: "Leonardo da Vinci",
4: "Pacific Ocean",
5: "Avocado",
6: "Jane Austen",
7: "China",
8: "Blue whale",
9: "Brasília",
10: "Alexander Fleming"
}
app.get('/', (req, res) => {
res.sendFile(__dirname + '/Quit.html');
});
app.get('/AboutPage.html', (req, res) => {
res.sendFile(__dirname +'/About page.html');
});
app.get('/IntroductionPage.html', (req, res) => {
res.sendFile(__dirname +'/IntroductionPage.html');
});
app.get('/Quit.html', (req, res) => {
res.sendFile(__dirname +'/Quit.html');
});
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('disconnect', () => {
console.log('A user disconnected');
});
socket.on('sendUsername', (inputName) => {
console.log(`userName:${inputName}`);
});
socket.on('submitAnswer', (data) => {
const {question,answer,time } = data;
const isCorrect = correctAnswers[question] === answer;
socket.emit('answerResult', {
isCorrect: isCorrect,
correctAnswer: correctAnswers[question]
});
});
function updateRanking(rank, newUser) {
// Add the new user to the leaderboard array
rank.push(newUser);
// bubble sort algorithm to update the leaderboard
for (let i = 0; i < rank.length - 1; i++) {
for (let j = 0; j < rank.length - i - 1; j++) {
if (rank[j].correctCount < rank[j + 1].correctCount) {
[rank[j], rank[j + 1]] = [rank[j + 1], rank[j]];
} else if (rank[j].correctCount === rank[j + 1].correctCount) {
if (rank[j].totalTime > rank[j + 1].totalTime) {
[rank[j], rank[j + 1]] = [rank[j + 1], rank[j]];
}
}
}
}
return rank;
}
socket.on('finish', (data) => {
const { CorrectAnswer: CorrectAnswer,
userName: inputName,
time : timeAnswered } = data;
const newUser = { username: inputName, correctCount: CorrectAnswer, totalTime: timeAnswered };
const updatedRanking = updateRanking(initialRanking, newUser);
socket.emit('rankresult', {
initialRanking:initialRanking
});
});
});
app.listen(port, () => {
console.log(`Server running at https://indexmatrix-journalclone-3000.codio-box.uk/AboutPage.html`)
});
这是quit.js
var questions = [
{
question: "Which planet is known as the Red Planet?",
options: ["Jupiter", "Mars", "Venus", "Saturn"],
},
{
question: "What is the capital of Australia?",
options: ["Sydney", "Melbourne", "Canberra", "Brisbane"],
},
{
question: "Who painted the Mona Lisa?",
options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"],
},
{
question: "What is the largest ocean on Earth?",
options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"],
},
{
question: "What is the main ingredient in guacamole?",
options: ["Tomato", "Avocado", "Onion", "Pepper"],
},
{
question: "Who wrote 'Pride and Prejudice'?",
options: ["Emily Bronte", "Jane Austen", "Charlotte Bronte", "Louisa May Alcott"],
},
{
question: "Which country is famous for the Great Wall?",
options: ["Japan", "China", "India", "Russia"],
},
{
question: "What is the largest mammal?",
options: ["Elephant", "Blue whale", "Giraffe", "Hippopotamus"],
},
{
question: "What is the capital of Brazil?",
options: ["Rio de Janeiro", "Brasília", "São Paulo", "Salvador"],
},
{
question: "Who discovered penicillin?",
options: ["Alexander Fleming", "Marie Curie", "Louis Pasteur", "Robert Koch"],
}
];
var startTime;
function startDate() {
startTime = new Date();
}
var endTime;
function endDate() {
endTime = new Date();
}
var socket = io();
var inputName = '';
function show() {
let div1obj = document.getElementById("div1");
let div2obj = document.getElementById("div2");
inputName = document.getElementById("welcome").value;
socket.emit('sendUsername', inputName);
div1obj.style.display = "none";
div2obj.style.display = "block";
startDate()
}
function startTimer() {
let timeLeft = 15; // 初始倒计时时间，单位为秒
document.getElementById("timer").innerText = "Time to answer: " + timeLeft + " seconds"; // 更新显示的倒计时时间
let timerInterval = setInterval(function () {
timeLeft--; // 每次执行时减少一秒
document.getElementById("timer").innerText = "Time to answer: " + timeLeft + " seconds"; // 更新显示的倒计时时间
if (timeLeft <= 0) {
clearInterval(timerInterval);
if (!selectionAnswer) {
selectionAnswer('F')
}
}
if (selectionAnswer) {
clearInterval(timerInterval);
}
}, 1000); // 每隔一秒执行一次
}
var questionNo = 1;
function renewal() {
let div2obj = document.getElementById("div2");
let div3obj = document.getElementById("div3");
let div4obj = document.getElementById("div4");
div3obj.style.display = "none";
div4obj.style.display = "none";
div2obj.style.display = "block";
document.getElementById("questionNo").innerText = 'Question' + questionNo;
document.getElementById("questionText").innerText = questions[questionNo - 1].question;
document.getElementById("btn2").innerText = 'A.' + questions[questionNo - 1].options[0];
document.getElementById("btn3").innerText = 'B.' + questions[questionNo - 1].options[1];
document.getElementById("btn4").innerText = 'C.' + questions[questionNo - 1].options[2];
document.getElementById("btn5").innerText = 'D.' + questions[questionNo - 1].options[3];
startTimer();
}
var selectedAnswer = '';
function selectionAnswer(selection) {
selectedAnswer = selection;
socket.emit('submitAnswer', {
question: questionNo,
answer: selectedAnswer,
});
judgeAnswer();
questionNo = questionNo + 1;
}
var CorrectAnswer = 0;
function judgeAnswer() {
let div2obj = document.getElementById("div2");
let div3obj = document.getElementById("div3");
let div4obj = document.getElementById("div4");
let div5obj = document.getElementById("div5");
div2obj.style.display = "none";
socket.on('answerResult', (data) => {
const {isCorrect, correctAnswer} = data;
canswer = correctAnswer;
if (isCorrect) {
div3obj.style.display = "block";
CorrectAnswer = CorrectAnswer + 1;
} else {
div4obj.style.display = "block";
}
socket.off('answerResult');
});
if (questionNo == 10) {
document.getElementById("btn6").style.display = "none";
document.getElementById("btn7").style.display = "none";
div5obj.style.display = "block";
document.getElementById("CorrectAnswer").innerText = "You got " + CorrectAnswer + " right out of 10.";
endDate();
var timeAnswered = (endTime - startTime) / 1000;
document.getElementById("timeAnswered").innerText = inputName + ' you use ' + timeAnswered + ' seconds to finish.';
socket.emit('finish', {
CorrectAnswer: CorrectAnswer,
userName: inputName,
time: timeAnswered
});
socket.on('rankresult', (data) => {
const {initialRanking} = data;
createRankingList(initialRanking);
});
}
}
function createRankingList(rankingData) {
//page display
const rankingList = document.getElementById('output');
const li = document.createElement('li');
// create ranking list
rankingData.forEach((user, index) => {
li.textContent = `${index + 1} - ${user.username} -- correct answers: ${user.correctCount} -- use time:${user.totalTime}`;
rankingList.appendChild(li);
});
}
