Prompt Details
Model
(claude-3-7-sonnet)
Token size
837
Example input
[TOPIC]: Articles in english
[TARGET_LANGUAGE]: English
[NATIVE_LANGUAGE]: Arabic
[AGE_GROUP_LEVEL]: kid B1
[STYLE]: No images, minimalistic green-ish style
Example output
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>English Articles Quiz - أدوات التعريف الإنجليزية</title>
<style>
/* Global Styles */
:root {
--primary: #4CAF50;
--secondary: #8BC34A;
--accent: #CDDC39;
--background: #F1F8E9;
--text: #33691E;
--correct: #689F38;
--incorrect: #D32F2F;
--white: #FFFFFF;
--shadow: rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: var(--background);
color: var(--text);
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.quiz-container {
max-width: 800px;
width: 100%;
background-color: var(--white);
border-radius: 12px;
box-shadow: 0 4px 12px var(--shadow);
padding: 20px;
position: relative;
margin-top: 20px;
}
h1, h2, h3 {
color: var(--primary);
text-align: center;
margin-bottom: 15px;
}
p {
line-height: 1.6;
margin-bottom: 10px;
}
/* Welcome Screen */
.welcome-screen {
text-align: center;
padding: 20px;
}
.instructions {
background-color: var(--background);
border-radius: 8px;
padding: 15px;
margin: 20px 0;
text-align: right;
}
.instruction-item {
margin-bottom: 15px;
border-bottom: 1px solid var(--secondary);
padding-bottom: 15px;
}
.instruction-item:last-child {
border-bottom: none;
}
.start-button {
background-color: var(--primary);
color: var(--white);
border: none;
border-radius: 50px;
padding: 12px 30px;
font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}
.start-button:hover {
background-color: var(--secondary);
transform: scale(1.05);
}
/* Question Styles */
.question {
margin-bottom: 30px;
display: none;
}
.question.active {
display: block;
animation: fadeIn 0.5s ease;
}
.question-text, .question-text-en {
font-size: 18px;
margin-bottom: 15px;
}
.question-text {
text-align: right;
direction: rtl;
}
.question-text-en {
border-bottom: 1px dashed var(--secondary);
padding-bottom: 10px;
}
/* Multiple Choice */
.options {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 15px;
}
.option {
display: flex;
align-items: center;
padding: 10px 15px;
background-color: var(--background);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.option:hover {
background-color: var(--accent);
}
.option input {
margin-right: 10px;
}
/* Translation */
.input-area {
margin: 15px 0;
}
.translation-input {
width: 100%;
padding: 12px;
border: 2px solid var(--secondary);
border-radius: 8px;
font-size: 16px;
}
/* Fill in Blank */
.blank-input {
border: 2px solid var(--secondary);
border-radius: 4px;
padding: 5px;
margin: 0 5px;
text-align: center;
font-size: 16px;
}
/* Matching */
.matching-container {
display: flex;
justify-content: space-between;
margin-top: 15px;
gap: 20px;
}
.items-column, .matches-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.match-item, .match-option {
padding: 10px;
background-color: var(--background);
border-radius: 8px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
}
.match-option {
text-align: right;
direction: rtl;
}
.match-item {
background-color: var(--primary);
color: var(--white);
}
.match-item.selected, .match-option.selected {
transform: scale(1.05);
box-shadow: 0 2px 8px var(--shadow);
}
.match-item.matched, .match-option.matched {
background-color: var(--correct);
color: var(--white);
cursor: default;
}
/* Feedback */
.feedback {
margin-top: 15px;
padding: 15px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.feedback.correct {
background-color: rgba(104, 159, 56, 0.1);
border: 2px solid var(--correct);
}
.feedback.incorrect {
background-color: rgba(211, 47, 47, 0.1);
border: 2px solid var(--incorrect);
}
.feedback-icon {
font-size: 32px;
margin-bottom: 10px;
}
.feedback.correct .feedback-icon {
color: var(--correct);
}
.feedback.incorrect .feedback-icon {
color: var(--incorrect);
}
.feedback-text {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.explanation, .hint-text {
font-size: 16px;
text-align: right;
direction: rtl;
}
/* Navigation */
.navigation {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.nav-button {
background-color: var(--secondary);
color: var(--white);
border: none;
border-radius: 8px;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.nav-button:hover {
background-color: var(--primary);
}
.nav-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.submit-button {
background-color: var(--accent);
color: var(--text);
font-weight: bold;
}
.submit-button:hover {
background-color: var(--primary);
color: var(--white);
}
/* Progress Bar */
.progress-container {
width: 100%;
height: 10px;
background-color: var(--background);
border-radius: 5px;
margin: 20px 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: var(--primary);
width: 0%;
transition: width 0.3s ease;
}
/* Results Screen */
.results-screen {
text-align: center;
padding: 20px;
}
.score-display {
display: flex;
justify-content: center;
margin: 30px 0;
}
.score-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: var(--primary);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--white);
box-shadow: 0 4px 12px var(--shadow);
}
.score-number {
font-size: 48px;
font-weight: bold;
}
.score-total {
font-size: 24px;
}
.feedback-message {
font-size: 20px;
margin: 20px 0;
text-align: center;
direction: rtl;
}
.result-actions {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.review-button, .retry-button {
background-color: var(--secondary);
color: var(--white);
border: none;
border-radius: 8px;
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
}
.retry-button {
background-color: var(--primary);
}
.review-button:hover, .retry-button:hover {
transform: scale(1.05);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hint */
.hint {
margin-top: 15px;
padding: 10px;
background-color: var(--accent);
border-radius: 8px;
border-left: 4px solid var(--primary);
text-align: right;
direction: rtl;
}
.hint.hidden {
display: none;
}
.hint-button {
background-color: transparent;
color: var(--primary);
border: 1px solid var(--primary);
border-radius: 20px;
padding: 5px 15px;
margin-top: 10px;
cursor: pointer;
transition: all 0.3s ease;
display: block;
margin-left: auto;
margin-right: auto;
}
.hint-button:hover {
background-color: var(--primary);
color: var(--white);
}
/* Responsive Design */
@media (max-width: 768px) {
.quiz-container {
padding: 15px;
}
.matching-container {
flex-direction: column;
}
.option, .match-item, .match-option {
padding: 8px;
}
.score-circle {
width: 120px;
height: 120px;
}
.score-number {
font-size: 36px;
}
.result-actions {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<div class="quiz-container">
<!-- Welcome Screen -->
<div id="welcome-screen" class="welcome-screen">
<h1>تعلم أدوات التعريف في اللغة الإنجليزية</h1>
<h2>Learn English Articles</h2>
<div class="instructions">
<p>مرحبًا بك في اختبار أدوات التعريف في اللغة الإنجليزية!</p>
<p>Welcome to the English Articles Quiz!</p>
<div class="instruction-item">
<p>هذا الاختبار يتكون من 5 أسئلة متنوعة عن استخدام "a", "an", و "the".</p>
<p>This quiz has 5 different questions about using "a", "an", and "the".</p>
</div>
<div class="instruction-item">
<p>اقرأ كل سؤال بعناية واختر الإجابة الصحيحة.</p>
<p>Read each question carefully and choose the correct answer.</p>
</div>
<div class="instruction-item">
<p>ستحصل على ملاحظات فورية لكل إجابة.</p>
<p>You will get immediate feedback for each answer.</p>
</div>
</div>
<button id="start-button" class="start-button">ابدأ الاختبار! (Start Quiz!)</button>
</div>
<!-- Quiz Screen -->
<div id="quiz-screen" style="display: none;">
<div class="progress-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
<div id="question-container"></div>
<button id="hint-button" class="hint-button">أريد تلميحًا</button>
<div class="navigation">
<button id="prev-button" class="nav-button">السابق</button>
<button id="submit-button" class="nav-button submit-button">تحقق</button>
<button id="next-button" class="nav-button">التالي</button>
</div>
</div>
<!-- Results Screen -->
<div id="results-screen" style="display: none;">
<!-- Will be populated dynamically -->
</div>
</div>
<script>
// Quiz Questions
const quizQuestions = [
{
type: "multipleChoice",
questionEn: "Choose the correct article: ___ book is on the table.",
questionAr: "اختر أداة التعريف الصحيحة: ___ book is on the table.",
options: ["a", "an", "the", "no article"],
correctAnswer: "the",
hint: "استخدم 'the' عندما تشير إلى شيء محدد.",
explanation: "نستخدم 'the' للإشارة إلى شيء محدد معروف."
},
{
type: "translation",
questionEn: "Translate to English: أريد تفاحة",
questionAr: "ترجم إلى الإنجليزية: أريد تفاحة",
correctAnswer: "I want an apple",
hint: "استخدم 'an' قبل الكلمات التي تبدأ بصوت حرف متحرك.",
explanation: "نستخدم 'an' قبل الكلمات التي تبدأ بصوت حرف متحرك مثل 'apple'."
},
{
type: "fillInBlank",
questionEn: "Fill in the blanks: I saw ___ elephant at ___ zoo yesterday.",
questionAr: "املأ الفراغات: I saw ___ elephant at ___ zoo yesterday.",
correctAnswer: ["an", "the"],
hint: "الفيل يبدأ بحرف متحرك، وحديقة الحيوان مكان محدد.",
explanation: "نستخدم 'an' قبل الكلمات التي تبدأ بصوت حرف متحرك، و'the' للأماكن المحددة."
},
{
type: "multipleChoice",
questionEn: "When do we use 'a'?",
questionAr: "متى نستخدم 'a'؟",
options: [
"Before any noun",
"Before specific nouns only",
"Before singular nouns that start with a consonant sound",
"Before plural nouns"
],
correctAnswer: "Before singular nouns that start with a consonant sound",
hint: "فكر في متى نقول 'a book' مقابل 'an apple'.",
explanation: "نستخدم 'a' قبل الأسماء المفردة التي تبدأ بصوت حرف ساكن."
},
{
type: "matching",
questionEn: "Match each article with its correct usage:",
questionAr: "اربط كل أداة تعريف مع استخدامها الصحيح:",
pairs: [
{ item: "a", match: "يستخدم مع الاسم النكرة الذي يبدأ بحرف ساكن" },
{ item: "an", match: "يستخدم مع الاسم النكرة الذي يبدأ بحرف متحرك" },
{ item: "the", match: "يستخدم مع الاسم المعرفة" }
],
hint: "فكر في قواعد استخدام كل أداة تعريف في اللغة الإنجليزية.",
explanation: "كل أداة تعريف لها قواعد محددة للاستخدام في اللغة الإنجليزية."
}
];
// Quiz State Variables
let currentQuestionIndex = 0;
let score = 0;
let userAnswers = [];
let shuffledQuestions = [];
let selectedMatchItem = null;
let matchedPairs = [];
// DOM Elements
const welcomeScreen = document.getElementById('welcome-screen');
const quizScreen = document.getElementById('quiz-screen');
const resultsScreen = document.getElementById('results-screen');
const questionContainer = document.getElementById('question-container');
const progressBar = document.getElementById('progress-bar');
const startButton = document.getElementById('start-button');
const prevButton = document.getElementById('prev-button');
const nextButton = document.getElementById('next-button');
const submitButton = document.getElementById('submit-button');
const hintButton = document.getElementById('hint-button');
// Event Listeners
startButton.addEventListener('click', startQuiz);
prevButton.addEventListener('click', goToPreviousQuestion);
nextButton.addEventListener('click', goToNextQuestion);
submitButton.addEventListener('click', submitAnswer);
hintButton.addEventListener('click', showHint);
// Function to shuffle questions
function shuffleQuestions(questions) {
const shuffled = [...questions];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
// Start Quiz
function startQuiz() {
welcomeScreen.style.display = 'none';
quizScreen.style.display = 'block';
shuffledQuestions = shuffleQuestions(quizQuestions);
userAnswers = Array(shuffledQuestions.length).fill(null);
currentQuestionIndex = 0;
score = 0;
loadQuestion();
updateNavButtons();
}
// Load Question
function loadQuestion() {
const question = shuffledQuestions[currentQuestionIndex];
updateProgressBar();
// Clear previous question and feedback
questionContainer.innerHTML = '';
// Create question element based on type
let questionElement;
switch(question.type) {
case 'multipleChoice':
questionElement = createMultipleChoiceQuestion(question);
break;
case 'translation':
questionElement = createTranslationQuestion(question);
break;
case 'fillInBlank':
questionElement = createFillInBlankQuestion(question);
break;
case 'matching':
questionElement = createMatchingQuestion(question);
break;
default:
questionElement = document.createElement('div');
questionElement.textContent = 'Question type not supported';
}
// Add the question to the container
questionContainer.appendChild(questionElement);
questionElement.classList.add('active');
// If user has already answered this question, show feedback
if (userAnswers[currentQuestionIndex] !== null) {
showFeedback();
}
}
// Create Multiple Choice Question
function createMultipleChoiceQuestion(question) {
const questionDiv = document.createElement('div');
questionDiv.className = 'question multiple-choice';
const heading = document.createElement('h3');
heading.textContent = `سؤال ${currentQuestionIndex + 1}`;
const questionTextAr = document.createElement('p');
questionTextAr.className = 'question-text';
questionTextAr.textContent = question.questionAr;
const questionTextEn = document.createElement('p');
questionTextEn.className = 'question-text-en';
questionTextEn.textContent = question.questionEn;
const optionsDiv = document.createElement('div');
optionsDiv.className = 'options';
question.options.forEach((option, index) => {
const label = document.createElement('label');
label.className = 'option';
const input = document.createElement('input');
input.type = 'radio';
input.name = `q${currentQuestionIndex}`;
input.value = option;
// If user has already answered, preselect the option
if (userAnswers[currentQuestionIndex] === option) {
input.checked = true;
}
const span = document.createElement('span');
span.textContent = option;
label.appendChild(input);
label.appendChild(span);
optionsDiv.appendChild(label);
});
const hintDiv = document.createElement('div');
hintDiv.className = 'hint hidden';
const hintText = document.createElement('p');
hintText.textContent = question.hint;
hintDiv.appendChild(hintText);
questionDiv.appendChild(heading);
questionDiv.appendChild(questionTextAr);
questionDiv.appendChild(questionTextEn);
questionDiv.appendChild(optionsDiv);
questionDiv.appendChild(hintDiv);
return questionDiv;
}
// Create Translation Question
function createTranslationQuestion(question) {
const questionDiv = document.createElement('div');
questionDiv.className = 'question translation';
const heading = document.createElement('h3');
heading.textContent = `سؤال ${currentQuestionIndex + 1}`;
const questionTextAr = document.createElement('p');
questionTextAr.className = 'question-text';
questionTextAr.textContent = question.questionAr;
const questionTextEn = document.createElement('p');
questionTextEn.className = 'question-text-en';
questionTextEn.textContent = question.questionEn;
const inputArea = document.createElement('div');
inputArea.className = 'input-area';
const input = document.createElement('input');
input.type = 'text';
input.className = 'translation-input';
input.placeholder = 'اكتب إجابتك هنا';
// If user has already answered, fill in the input
if (userAnswers[currentQuestionIndex] !== null) {
input.value = userAnswers[currentQuestionIndex];
}
const hintDiv = document.createElement('div');
hintDiv.className = 'hint hidden';
const hintText = document.createElement('p');
hintText.textContent = question.hint;
hintDiv.appendChild(hintText);
inputArea.appendChild(input);
questionDiv.appendChild(heading);
questionDiv.appendChild(questionTextAr);
questionDiv.appendChild(questionTextEn);
questionDiv.appendChild(inputArea);
questionDiv.appendChild(hintDiv);
return questionDiv;
}
// Create Fill In Blank Question
function createFillInBlankQuestion(question) {
const questionDiv = document.createElement('div');
questionDiv.className = 'question fill-in-blank';
const heading = document.createElement('h3');
heading.textContent = `سؤال ${currentQuestionIndex + 1}`;
const questionTextAr = document.createElement('p');
questionTextAr.className = 'question-text';
questionTextAr.textContent = question.questionAr;
const questionTextEn = document.createElement('p');
questionTextEn.className = 'question-text-en';
// Split the question text by the blank placeholders
const parts = question.questionEn.split('___');
// Create input fields between parts
for (let i = 0; i < parts.length; i++) {
const textNode = document.createTextNode(parts[i]);
questionTextEn.appendChild(textNode);
// If not the last part, add an input field
if (i < parts.length - 1) {
const input = document.createElement('input');
input.type = 'text';
input.className = 'blank-input';
input.dataset.index = i;
input.style.width = '50px';
// If user has already answered, fill in the input
if (userAnswers[currentQuestionIndex] !== null) {
input.value = userAnswers[currentQuestionIndex][i];
}
questionTextEn.appendChild(input);
}
}
const hintDiv = document.createElement('div');
hintDiv.className = 'hint hidden';
const hintText = document.createElement('p');
hintText.textContent = question.hint;
hintDiv.appendChild(hintText);
questionDiv.appendChild(heading);
questionDiv.appendChild(questionTextAr);
questionDiv.appendChild(questionTextEn);
questionDiv.appendChild(hintDiv);
return questionDiv;
}
// Create Matching Question
function createMatchingQuestion(question) {
const questionDiv = document.createElement('div');
questionDiv.className = 'question matching';
const heading = document.createElement('h3');
heading.textContent = `سؤال ${currentQuestionIndex + 1}`;
const questionTextAr = document.createElement('p');
questionTextAr.className = 'question-text';
questionTextAr.textContent = question.questionAr;
const questionTextEn = document.createElement('p');
questionTextEn.className = 'question-text-en';
questionTextEn.textContent = question.questionEn;
const matchingContainer = document.createElement('div');
matchingContainer.className = 'matching-container';
const itemsColumn = document.createElement('div');
itemsColumn.className = 'items-column';
const matchesColumn = document.createElement('div');
matchesColumn.className = 'matches-column';
// Reset the matching state
selectedMatchItem = null;
matchedPairs = [];
// If user has already answered this question, restore the matches
if (userAnswers[currentQuestionIndex] !== null) {
matchedPairs = userAnswers[currentQuestionIndex].map((_, index) => index);
}
// Create item elements
question.pairs.forEach((pair, index) => {
const itemDiv = document.createElement('div');
itemDiv.className = 'match-item';
if (matchedPairs.includes(index)) {
itemDiv.classList.add('matched');
}
itemDiv.dataset.index = index;
itemDiv.textContent = pair.item;
itemDiv.addEventListener('click', function() {
if (!matchedPairs.includes(index)) {
// If another item was selected, deselect it
if (selectedMatchItem !== null) {
document.querySelectorAll('.match-item.selected').forEach(item => {
item.classList.remove('selected');
});
}
selectedMatchItem = index;
this.classList.add('selected');
}
});
itemsColumn.appendChild(itemDiv);
});
// Create match elements
question.pairs.forEach((pair, index) => {
const matchDiv = document.createElement('div');
matchDiv.className = 'match-option';
if (matchedPairs.includes(index)) {
matchDiv.classList.add('matched');
}
matchDiv.dataset.match = index;
matchDiv.textContent = pair.match;
matchDiv.addEventListener('click', function() {
if (selectedMatchItem !== null && !matchedPairs.includes(index)) {
// Mark as matched
document.querySelector(`.match-item[data-index="${selectedMatchItem}"]`).classList.add('matched');
this.classList.add('matched');
// Add to matched pairs
matchedPairs.push(selectedMatchItem);
// Update user answers
const currentAnswers = userAnswers[currentQuestionIndex] || [];
currentAnswers[selectedMatchItem] = pair.match;
userAnswers[currentQuestionIndex] = currentAnswers;
// Reset selection
document.querySelectorAll('.match-item.selected').forEach(item => {
item.classList.remove('selected');
});
selectedMatchItem = null;
// If all pairs are matched, submit automatically
if (matchedPairs.length === question.pairs.length) {
submitAnswer();
}
}
});
matchesColumn.appendChild(matchDiv);
});
const hintDiv = document.createElement('div');
hintDiv.className = 'hint hidden';
const hintText = document.createElement('p');
hintText.textContent = question.hint;
hintDiv.appendChild(hintText);
matchingContainer.appendChild(itemsColumn);
matchingContainer.appendChild(matchesColumn);
questionDiv.appendChild(heading);
questionDiv.appendChild(questionTextAr);
questionDiv.appendChild(questionTextEn);
questionDiv.appendChild(matchingContainer);
questionDiv.appendChild(hintDiv);
return questionDiv;
}
// Navigation Functions
function goToPreviousQuestion() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
loadQuestion();
updateNavButtons();
}
}
function goToNextQuestion() {
if (currentQuestionIndex < shuffledQuestions.length - 1) {
currentQuestionIndex++;
loadQuestion();
updateNavButtons();
} else {
showResults();
}
}
function updateNavButtons() {
prevButton.disabled = currentQuestionIndex === 0;
nextButton.disabled = currentQuestionIndex === shuffledQuestions.length - 1;
// If user has already answered this question, disable submit button
submitButton.disabled = userAnswers[currentQuestionIndex] !== null;
// Change next button text on last question
if (currentQuestionIndex === shuffledQuestions.length - 1) {
nextButton.textContent = 'النتائج';
} else {
nextButton.textContent = 'التالي';
}
}
function updateProgressBar() {
const progress = ((currentQuestionIndex + 1) / shuffledQuestions.length) * 100;
progressBar.style.width = `${progress}%`;
}
// Show Hint
function showHint() {
const hintDiv = document.querySelector('.hint');
hintDiv.classList.remove('hidden');
hintButton.style.display = 'none';
}
// Submit Answer
function submitAnswer() {
const question = shuffledQuestions[currentQuestionIndex];
let userAnswer = null;
let isCorrect = false;
switch(question.type) {
case 'multipleChoice':
const selectedOption = document.querySelector(`input[name="q${currentQuestionIndex}"]:checked`);
if (selectedOption) {
userAnswer = selectedOption.value;
isCorrect = userAnswer === question.correctAnswer;
}
break;
case 'translation':
const translationInput = document.querySelector('.translation-input');
if (translationInput && translationInput.value.trim()) {
userAnswer = translationInput.value.trim();
isCorrect = userAnswer.toLowerCase() === question.correctAnswer.toLowerCase();
}
break;
case 'fillInBlank':
const blankInputs = document.querySelectorAll('.blank-input');
if (blankInputs.length > 0) {
userAnswer = Array.from(blankInputs).map(input => input.value.trim());
isCorrect = userAnswer.every((answer, i) =>
answer.toLowerCase() === question.correctAnswer[i].toLowerCase());
}
break;
case 'matching':
// For matching, the answer is already stored during the matching process
if (userAnswers[currentQuestionIndex]) {
userAnswer = userAnswers[currentQuestionIndex];
isCorrect = userAnswer.length === question.pairs.length;
}
break;
}
// Store the user's answer
if (userAnswer !== null) {
userAnswers[currentQuestionIndex] = userAnswer;
// Update score if correct
if (isCorrect) {
score++;
}
// Show feedback
showFeedback(isCorrect, question.explanation);
// Disable submit button
submitButton.disabled = true;
}
}
// Show Feedback
function showFeedback() {
const question = shuffledQuestions[currentQuestionIndex];
const userAnswer = userAnswers[currentQuestionIndex];
// Determine if the answer is correct
let isCorrect = false;
switch(question.type) {
case 'multipleChoice':
case 'translation':
isCorrect = userAnswer.toLowerCase() === question.correctAnswer.toLowerCase();
break;
case 'fillInBlank':
isCorrect = userAnswer.every((answer, i) =>
answer.toLowerCase() === question.correctAnswer[i].toLowerCase());
break;
case 'matching':
isCorrect = userAnswer.length === question.pairs.length;
break;
}
// Create feedback element
const feedbackDiv = document.createElement('div');
feedbackDiv.className = isCorrect ? 'feedback correct' : 'feedback incorrect';
const feedbackIcon = document.createElement('span');
feedbackIcon.className = 'feedback-icon';
feedbackIcon.textContent = isCorrect ? '✓' : '✗';
const feedbackText = document.createElement('p');
feedbackText.className = 'feedback-text';
feedbackText.textContent = isCorrect ? 'أحسنت! إجابة صحيحة!' : 'حاول مرة أخرى!';
const explanationText = document.createElement('p');
explanationText.className = isCorrect ? 'explanation' : 'hint-text';
explanationText.textContent = isCorrect ? question.explanation : question.hint;
feedbackDiv.appendChild(feedbackIcon);
feedbackDiv.appendChild(feedbackText);
feedbackDiv.appendChild(explanationText);
// Remove any existing feedback
const existingFeedback = document.querySelector('.feedback');
if (existingFeedback) {
existingFeedback.remove();
}
// Add the feedback to the question
document.querySelector('.question').appendChild(feedbackDiv);
// Hide the hint button
hintButton.style.display = 'none';
}
// Show Results
function showResults() {
quizScreen.style.display = 'none';
resultsScreen.style.display = 'block';
const percentage = (score / shuffledQuestions.length) * 100;
let feedback;
if (percentage >= 80) {
feedback = "ممتاز! لقد أحسنت في فهم أدوات التعريف الإنجليزية!";
} else if (percentage >= 60) {
feedback = "جيد! استمر في التدرب على أدوات التعريف الإنجليزية.";
} else {
feedback = "استمر في المحاولة! أدوات التعريف تحتاج إلى مزيد من الممارسة.";
}
resultsScreen.innerHTML = `
<h2>نتائج الاختبار</h2>
<h3>Quiz Results</h3>
<div class="score-display">
<div class="score-circle">
<span class="score-number">${score}</span>
<span class="score-total">/${shuffledQuestions.length}</span>
</div>
</div>
<p class="feedback-message">${feedback}</p>
<div class="result-actions">
<button id="review-button" class="review-button">مراجعة الإجابات</button>
<button id="retry-button" class="retry-button">إعادة المحاولة</button>
</div>
`;
// Add event listeners to result buttons
document.getElementById('review-button').addEventListener('click', reviewAnswers);
document.getElementById('retry-button').addEventListener('click', retryQuiz);
}
// Review Answers
function reviewAnswers() {
resultsScreen.style.display = 'none';
quizScreen.style.display = 'block';
currentQuestionIndex = 0;
loadQuestion();
updateNavButtons();
}
// Retry Quiz
function retryQuiz() {
startQuiz();
}
</script>
</body>
</html>
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
9
Views
CLAUDE-3-7-SONNET
Generates an interactive language quiz for Claude Artifact or standalone HTML. Customize with:
[TOPIC] - Vocabulary focus (e.g., "Food")
[TARGET_LANGUAGE] - Language taught (e.g., Spanish)
[NATIVE_LANGUAGE] - Learner's native language
[AGE_GROUP_LEVEL] - Age & skill:
kid-A1 (7-12, beginner)
kid-A2 (elementary)
teen-B1 (13-17, intermediate)
teen-B2 (upper-intermediate)
adult-A1 (18+, beginner)
adult-B2 (upper-intermediate)
[STYLE] - Visual theme (e.g., "Minimalist")
...more
Added over 1 month ago
