Skip to content

Commit f8d584a

Browse files
Jenni0608Jenni0608
authored
Add files via upload
Updated files
1 parent 3a62b48 commit f8d584a

File tree

2 files changed

+1166
-1095
lines changed

2 files changed

+1166
-1095
lines changed

‎static/script.js‎

Lines changed: 151 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,151 @@
1-
// Wait for the DOM to load before executing any code
2-
document.addEventListener('DOMContentLoaded', function() {
3-
// Get references to various DOM elements
4-
const container = document.getElementById('rdfDataContainer');
5-
const articleInfoContainer = document.getElementById('articleInfoContainer');
6-
const questionBox = document.getElementById('questionBox');
7-
const totalScoreElement = document.getElementById('totalScore');
8-
9-
// Function to handle the submission of an answer
10-
function handleSubmit() {
11-
// Get the selected option from the radio buttons
12-
const selectedOption = document.querySelector('input[name="answer"]:checked');
13-
if (!selectedOption) {
14-
alert('Please select an option.'); // Alert if no option is selected
15-
return;
16-
}
17-
18-
// Determine the score based on the selected option
19-
let score;
20-
switch (selectedOption.value) {
21-
case '(i)':
22-
score = 0;
23-
break;
24-
case '(ii)':
25-
score = 1;
26-
break;
27-
case '(iii)':
28-
score = 2;
29-
break;
30-
default:
31-
score = 0;
32-
break;
33-
}
34-
35-
// Send the selected answer and score to the server
36-
fetch('/submit_answer', {
37-
method: 'POST',
38-
headers: {
39-
'Content-Type': 'application/json'
40-
},
41-
body: JSON.stringify({ choice: selectedOption.value, score: score })
42-
})
43-
.then(response => response.json())
44-
.then(data => {
45-
// Update the total score displayed on the page
46-
totalScoreElement.textContent = data.total_score;
47-
48-
// Check if the quiz is completed
49-
if (data.completed) {
50-
// Redirect to the completion page
51-
window.location.href = '/complete';
52-
} else {
53-
// Load the next question
54-
loadNextQuestion();
55-
}
56-
})
57-
.catch(error => {
58-
console.error('Error submitting answer:', error);
59-
});
60-
}
61-
62-
// Function to attach event listener to the submit button
63-
function attachSubmitButtonListener() {
64-
const submitButton = document.getElementById('submitButton');
65-
submitButton.addEventListener('click', handleSubmit);
66-
}
67-
68-
// Function to load the next question from the server
69-
function loadNextQuestion() {
70-
fetch('/get_next_question')
71-
.then(response => response.json())
72-
.then(data => {
73-
// Update the UI with the new question and article info
74-
updateQuestionUI(data);
75-
updateArticleInfo(data.article_details);
76-
})
77-
.catch(error => {
78-
console.error('Error loading next question:', error);
79-
});
80-
}
81-
82-
// Function to update the question UI with new data
83-
function updateQuestionUI(data) {
84-
questionBox.innerHTML = `
85-
<div class="question-header">
86-
<h3>Multiple Choice Question #${data.question.number}</h3>
87-
<p>${data.question.definition}</p>
88-
</div>
89-
`;
90-
91-
container.innerHTML = `
92-
<form id="answerForm">
93-
<ul>
94-
${data.answers.map(answer => `
95-
<li>
96-
<input type="radio" name="answer" value="${answer.answerLabel}" data-score="${answer.score}">
97-
${answer.answerLabel}: ${answer.answerDef}
98-
</li>
99-
`).join('')}
100-
</ul>
101-
</form>
102-
`;
103-
}
104-
105-
// Function to update the article info section with new data
106-
function updateArticleInfo(articleDetails) {
107-
articleInfoContainer.innerHTML = `
108-
<div class="article-info-box-left">
109-
<h3>${articleDetails.prefLabel}</h3>
110-
<p>${articleDetails.definition}</p>
111-
</div>
112-
<div class="article-info-box-right">
113-
<p>Source: <a href="${articleDetails.source}">${articleDetails.source}</a></p>
114-
<p>Score: <span id="totalScore">${totalScoreElement.textContent}</span></p>
115-
</div>
116-
`;
117-
}
118-
119-
// Attach event listener to the submit button and load the first question
120-
attachSubmitButtonListener();
121-
loadNextQuestion();
122-
});
1+
// Wait for the DOM to load before executing any code
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// Get references to various DOM elements
4+
const container = document.getElementById('rdfDataContainer');
5+
const articleInfoContainer = document.getElementById('articleInfoContainer');
6+
const questionBox = document.getElementById('questionBox');
7+
const totalScoreElement = document.getElementById('totalScore');
8+
const progressText = document.getElementById('progressText');
9+
10+
let totalQuestions = 0;
11+
let questionsCompleted = 0;
12+
13+
// Function to handle the submission of an answer
14+
function handleSubmit() {
15+
// Get the selected option from the radio buttons
16+
const selectedOption = document.querySelector('input[name="answer"]:checked');
17+
if (!selectedOption) {
18+
alert('Please select an option.'); // Alert if no option is selected
19+
return;
20+
}
21+
22+
// Determine the score based on the selected option
23+
let score;
24+
switch (selectedOption.value) {
25+
case '(i)':
26+
score = 0;
27+
break;
28+
case '(ii)':
29+
score = 1;
30+
break;
31+
case '(iii)':
32+
score = 2;
33+
break;
34+
default:
35+
score = 0;
36+
break;
37+
}
38+
39+
// Send the selected answer and score to the server
40+
fetch('/submit_answer', {
41+
method: 'POST',
42+
headers: {
43+
'Content-Type': 'application/json'
44+
},
45+
body: JSON.stringify({ choice: selectedOption.value, score: score })
46+
})
47+
.then(response => response.json())
48+
.then(data => {
49+
// Update the total score displayed on the page
50+
totalScoreElement.textContent = data.total_score;
51+
// Ensure questionsCompleted never exceeds totalQuestions
52+
if (questionsCompleted < totalQuestions) {
53+
questionsCompleted += 1;
54+
}
55+
updateProgressDisplay();
56+
57+
// Check if the quiz is completed
58+
if (data.completed) {
59+
// Redirect to the completion page
60+
window.location.href = '/complete';
61+
} else {
62+
// Load the next question
63+
loadNextQuestion();
64+
}
65+
66+
})
67+
.catch(error => {
68+
console.error('Error submitting answer:', error);
69+
});
70+
}
71+
72+
// Function to attach event listener to the submit button
73+
function attachSubmitButtonListener() {
74+
const submitButton = document.getElementById('submitButton');
75+
submitButton.addEventListener('click', handleSubmit);
76+
}
77+
78+
// Function to load the next question from the server
79+
function loadNextQuestion() {
80+
fetch('/get_next_question')
81+
.then(response => response.json())
82+
.then(data => {
83+
// Update the UI with the new question and article info
84+
updateQuestionUI(data);
85+
updateArticleInfo(data.article_details);
86+
totalQuestions = data.total_questions;
87+
questionsCompleted = data.questions_completed;
88+
updateProgressDisplay();
89+
})
90+
.catch(error => {
91+
console.error('Error loading next question:', error);
92+
});
93+
}
94+
95+
// Function to update the question UI with new data
96+
function updateQuestionUI(data) {
97+
questionBox.innerHTML = `
98+
<div class="question-header">
99+
<h3>Multiple Choice Question #${data.question.number}</h3>
100+
<p>${data.question.definition}</p>
101+
</div>
102+
`;
103+
104+
container.innerHTML = `
105+
<form id="answerForm">
106+
<ul>
107+
${data.answers.map(answer => `
108+
<li>
109+
<input type="radio" name="answer" value="${answer.answerLabel}" data-score="${answer.score}">
110+
${answer.answerLabel}: ${answer.answerDef}
111+
</li>
112+
`).join('')}
113+
</ul>
114+
</form>
115+
`;
116+
}
117+
118+
// Function to update the article info section with new data
119+
function updateArticleInfo(articleDetails) {
120+
articleInfoContainer.innerHTML = `
121+
<div class="article-info-box-left">
122+
<h3>${articleDetails.prefLabel}</h3>
123+
<p>${articleDetails.definition}</p>
124+
</div>
125+
<div class="article-info-box-right">
126+
<p>Source: <a href="${articleDetails.source}">${articleDetails.source}</a></p>
127+
<p>Score: <span id="totalScore">${totalScoreElement.textContent}</span></p>
128+
</div>
129+
`;
130+
}
131+
132+
// Function to show progress
133+
function updateProgressDisplay() {
134+
progressText.textContent = `Question ${questionsCompleted + 1} of ${totalQuestions}`;
135+
}
136+
137+
// Function to show a confirmation dialog before stopping the assessment
138+
function confirmStopAssessment() {
139+
if (confirm("Are you sure you want to stop the assessment? This action cannot be undone.")) {
140+
window.location.href = '/stop_assessment';
141+
}
142+
}
143+
144+
// Attach the confirmStopAssessment function to the stop button
145+
const stopButton = document.getElementById('stopButton');
146+
stopButton.addEventListener('click', confirmStopAssessment);
147+
148+
// Attach event listener to the submit button and load the first question
149+
attachSubmitButtonListener();
150+
loadNextQuestion();
151+
});

0 commit comments

Comments
 (0)