gtitov
3 years ago
parent
3d2d415c5e
commit
2c0233a543
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Minified version -->
|
||||
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
||||
<script src="main.js"></script>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header id="header">
|
||||
<h1>Тестирование</h1>
|
||||
<p>Получите тест</p>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<p>Найдите себя и нажмите получить тест:</p>
|
||||
<p>
|
||||
<select id="students-selector">
|
||||
<option value="" disabled selected>ФИО</option>
|
||||
</select>
|
||||
<button id="get-quiz" disabled>Получить тест</button>
|
||||
</p>
|
||||
<button id="end-quiz"><code>Завершить тест для всех</code></button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>Jane Smith's website.</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,102 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// console.log("ok")
|
||||
var students_selector = document.getElementById("students-selector")
|
||||
var get_quiz_button = document.getElementById("get-quiz")
|
||||
|
||||
fetch("http://localhost:8000/students")
|
||||
.then(r => r.json())
|
||||
.then(students => {
|
||||
students.forEach(student => {
|
||||
students_selector.innerHTML += `<option value=${student.id}>${student.name}</option>`
|
||||
})
|
||||
students_selector.addEventListener("change", function (e) {
|
||||
get_quiz_button.disabled = false
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
})
|
||||
|
||||
get_quiz_button.addEventListener("click", function () {
|
||||
// console.log(students_selector.value)
|
||||
// console.log(students_selector.options[students_selector.selectedIndex].text)
|
||||
fetch('http://localhost:8000/get_quiz?' + new URLSearchParams({
|
||||
student_id: students_selector.value,
|
||||
student: students_selector.options[students_selector.selectedIndex].text
|
||||
}))
|
||||
.then(r => r.json())
|
||||
.then(quiz => {
|
||||
// console.log(quiz)
|
||||
var questions = quiz.questions
|
||||
|
||||
var questions_html = "<form id='form' onkeydown='return event.keyCode != 13;'>"
|
||||
questions.forEach(q => {
|
||||
console.log(q)
|
||||
if (q.options) {
|
||||
let options_div = ""
|
||||
q.options.forEach(o => {
|
||||
options_div +=
|
||||
`<div>
|
||||
<input type="radio" id="${o}" name="${q.id}" value="${o}">
|
||||
<label for="${o}">${o}</label>
|
||||
</div>`
|
||||
})
|
||||
const question_div =
|
||||
`<fieldset>
|
||||
<legend>Выберите ответ:</legend>
|
||||
${options_div}
|
||||
</fieldset>`
|
||||
questions_html +=
|
||||
`<article>
|
||||
<h3>${q.question}</h3>
|
||||
${q.picture ? `<img src='${q.picture}'>` : ""}
|
||||
${question_div}
|
||||
</article>`
|
||||
} else {
|
||||
const question_div = `<input type="text" id="${q.id}" name="${q.id}">`
|
||||
questions_html +=
|
||||
`<article>
|
||||
<h3>${q.question}</h3>
|
||||
${q.picture ? `<img src='${q.picture}'>` : ""}
|
||||
${question_div}
|
||||
</article>`
|
||||
}
|
||||
})
|
||||
// console.log(questions_html)
|
||||
questions_html += "</form>"
|
||||
document.getElementById("header").innerHTML = `<h1>Тестирование</h1><p>${students_selector.options[students_selector.selectedIndex].text}</p>`
|
||||
document.getElementById("main").innerHTML = questions_html
|
||||
|
||||
var button = document.createElement('button');
|
||||
button.innerHTML = 'Сдать';
|
||||
button.onclick = function () {
|
||||
const form = document.getElementById('form');
|
||||
const formData = new FormData(form);
|
||||
console.log(formData)
|
||||
for (const [key, value] of formData) {
|
||||
console.log(quiz)
|
||||
console.log(`${key}: ${value}\n`) // assume questions are in the same order - can it make code simplier?
|
||||
quiz.questions.find(q => q.id == key).student_answer = value
|
||||
// console.log(quiz)
|
||||
}
|
||||
fetch('http://localhost:8000/save_student_answers?' + new URLSearchParams({
|
||||
student_answers: JSON.stringify(quiz)
|
||||
}))
|
||||
document.getElementById("main").innerHTML = "<p>Тестирование окончено</p>"
|
||||
};
|
||||
// where do we want to have the button to appear?
|
||||
// you can append it to another element just by doing something like
|
||||
// document.getElementById('foobutton').appendChild(button);
|
||||
document.getElementById("main").appendChild(button)
|
||||
})
|
||||
})
|
||||
|
||||
document.getElementById("end-quiz").addEventListener("click", function() {
|
||||
let pass = window.prompt("Уважаемый преподаватель, введите пароль, чтобы завершить тестирование для всех", "Я здесь случайно")
|
||||
// console.log(pass)
|
||||
fetch('http://localhost:8000/end_quiz?' + new URLSearchParams({
|
||||
password: pass
|
||||
}))
|
||||
.then(r => r.text())
|
||||
.then(text => window.alert(text))
|
||||
})
|
||||
})
|
||||
Loading…
Reference in new issue