Всем здравствуйте, недавно скинули вопросы и ответы к предстоящей сессии и решил к ней сделать небольшой сайт викторину, но столкнулся с проблемой импортом данных с .docx файла. В Файле .docx 200 вопросов, такого формата:
spoilerНомер вопроса. Вопрос
A. Вариант ответа А
B. Вариант ответа B
C. Вариант ответа C
D. Вариант ответа D
. Правильный ответ выделен красным цветом, примерно вот так:
spoiler
.
На костях сделал такой код со встроенной Java-script логикой.
<!DOCTYPE html>
<html>
<head>
<title>Викторина</title>
<style>
.question {
font-weight: bold;
}
.options {
list-style-type: none;
padding: 0;
}
.option {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="quiz">
<div id="question-container">
<p id="question" class="question"></p>
<ul id="options" class="options">
</ul>
</div>
<p id="result"></p>
<button id="next-btn">Следующий вопрос</button>
</div>
<script>
// Предположим, что вопросы и ответы находятся в переменной questionsData, полученной из .docx файла
// Пример данных вопросов и ответов
const questionsData = [
{
number: 1,
question: "Как называется столица Франции?",
options: ["Париж", "Лондон", "Берлин", "Рим"],
answer: "Париж"
},
];
let currentQuestion = 0;
const questionElement = document.getElementById('question');
const optionsList = document.getElementById('options');
const resultElement = document.getElementById('result');
const nextButton = document.getElementById('next-btn');
function displayQuestion() {
const current = questionsData[currentQuestion];
questionElement.textContent = `${current.number}. ${current.question}`;
optionsList.innerHTML = '';
current.options.forEach((option, index) => {
const li = document.createElement('li');
li.textContent = option;
li.classList.add('option');
li.addEventListener('click', () => checkAnswer(index));
optionsList.appendChild(li);
});
}
function checkAnswer(selectedIndex) {
const current = questionsData[currentQuestion];
if (current.options[selectedIndex] === current.answer) {
resultElement.textContent = 'Правильно!';
} else {
resultElement.textContent = `Неправильно. Правильный ответ: ${current.answer}`;
}
nextButton.style.display = 'block';
optionsList.removeEventListener('click', checkAnswer);
}
nextButton.addEventListener('click', () => {
resultElement.textContent = '';
nextButton.style.display = 'none';
currentQuestion = (currentQuestion + 1) % questionsData.length;
displayQuestion();
});
// Начать отображение вопросов
displayQuestion();
</script>
</body>
</html>
Все вопросы сделать одним аккуратно сделаны одним алгоритм, технический они должны быть одинаковы по форме (не точно). Как быстро добавить остальные 199 вопросов, если есть путь к автоматизации этого процесса, буду рад помощи.
