<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Ethiopian Graduate Admission Test</title><style> body { font-family: Arial, sans-serif; margin: 15px; background: #f9f9f9; } h1 { text-align: center; color: #2c3e50; } form { max-width: 720px; margin: 0 auto; background: #fff; padding: 20px 30px; box-shadow: 0 0 10px #ccc; border-radius: 8px; } .question { margin-bottom: 25px; } .question h3 { margin-bottom: 10px; color: #34495e; } .options label { display: block; margin-bottom: 8px; cursor: pointer; padding: 6px 10px; border-radius: 4px; border: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s; } .options input[type="radio"] { margin-right: 10px; } .options label:hover { background-color: #ecf0f1; } .correct { background-color: #d4edda !important; border-color: #28a745 !important; color: #155724; } .incorrect { background-color: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; } .nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; } button { padding: 10px 18px; border: none; background-color: #2980b9; color: white; font-size: 16px; border-radius: 5px; cursor: pointer; } button:disabled { background-color: #95a5a6; cursor: not-allowed; } #submitBtn { width: 100%; margin-top: 25px; } #resultSummary { max-width: 720px; margin: 20px auto; background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 15px 25px; border-radius: 8px; font-size: 18px; display: none; } @media (max-width: 600px) { form { padding: 15px 20px; } button { font-size: 14px; padding: 8px 14px; } }</style></head><body><h1>Ethiopian Graduate Admission Test</h1>
<form id="quizForm" novalidate>
<!-- Questions container --> <div id="questionsContainer"></div>
<div class="nav-buttons"> <button type="button" id="prevBtn" disabled>Previous</button> <button type="button" id="nextBtn">Next</button> </div>
<button type="button" id="submitBtn" style="display:none;">Submit</button></form>
<div id="resultSummary"></div>
<script> // Questions array const questions = [ { question: "What is the capital city of Ethiopia?", options: ["Addis Ababa", "Mekelle", "Bahir Dar", "Dire Dawa"], answer: 0 }, { question: "Which year did Ethiopia officially become a member of the United Nations?", options: ["1945", "1955", "1963", "1970"], answer: 0 }, { question: "What is the main language of instruction in Ethiopian universities?", options: ["Amharic", "English", "Oromo", "Tigrinya"], answer: 1 }, { question: "Solve: If $x + 3 = 7$, what is $x$?", options: ["10", "4", "3", "-4"], answer: 1 }, { question: "Who was the Emperor of Ethiopia during the Italian invasion in 1935?", options: ["Menelik II", "Haile Selassie I", "Tewodros II", "Yohannes IV"], answer: 1 }, { question: "What is the derivative of $f(x) = x^2$?", options: ["$x$", "$2x$", "$x^3$", "$2$"], answer: 1 }, { question: "The Great Rift Valley passes through which part of Ethiopia?", options: ["Northern", "Eastern", "Central", "Western"], answer: 2 }, { question: "Choose the correctly spelled word:", options: ["Recieve", "Receive", "Receve", "Recive"], answer: 1 }, { question: "Which of the following is a renewable energy source widely used in Ethiopia?", options: ["Coal", "Hydropower", "Natural Gas", "Nuclear"], answer: 1 }, { question: "What is the main purpose of a thesis in postgraduate studies?", options: [ "To summarize a book", "To report research findings", "To write an essay", "To memorize facts" ], answer: 1 } ];
const questionsContainer = document.getElementById('questionsContainer'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const submitBtn = document.getElementById('submitBtn'); const resultSummary = document.getElementById('resultSummary');
let currentQuestionIndex = 0;
// Render question function renderQuestion(index) { const q = questions[index]; let html = `<div class="question" data-qindex="${index}">`; html += `<h3>Q${index + 1}. ${q.question}</h3><div class="options">`;
q.options.forEach((opt, i) => { // Use unique ids per question/option for labels const inputId = `q${index}_opt${i}`; html += ` <label for="${inputId}"> <input type="radio" name="question${index}" id="${inputId}" value="${i}" /> ${opt} </label> `; });
html += "</div></div>"; questionsContainer.innerHTML = html;
// Reset buttons prevBtn.disabled = index === 0; nextBtn.style.display = index === questions.length - 1 ? 'none' : 'inline-block'; submitBtn.style.display = index === questions.length - 1 ? 'inline-block' : 'none';
// Clear result summary on question change resultSummary.style.display = "none"; }
// Navigation handlers prevBtn.addEventListener('click', () => { if (currentQuestionIndex > 0) { currentQuestionIndex--; renderQuestion(currentQuestionIndex); restoreSelection(currentQuestionIndex); } });
nextBtn.addEventListener('click', () => { if (currentQuestionIndex < questions.length - 1) { currentQuestionIndex++; renderQuestion(currentQuestionIndex); restoreSelection(currentQuestionIndex); } });
// Store user answers here const userAnswers = new Array(questions.length).fill(null);
// Save selection when option clicked questionsContainer.addEventListener('change', (e) => { if (e.target.name.startsWith('question')) { const qIndex = parseInt(e.target.name.replace('question', '')); userAnswers[qIndex] = parseInt(e.target.value); } });
// Restore selection on navigation function restoreSelection(index) { const selected = userAnswers[index]; if (selected !== null) { const radioToCheck = document.querySelector(`input[name="question${index}"][value="${selected}"]`); if (radioToCheck) radioToCheck.checked = true; } }
// Submit handler - evaluate answers submitBtn.addEventListener('click', () => { // Ensure all questions answered for (let i = 0; i < questions.length; i++) { if (userAnswers[i] === null) { alert(`Please answer question ${i + 1} before submitting.`); currentQuestionIndex = i; renderQuestion(currentQuestionIndex); return; } }
// Disable navigation and submit button after submit prevBtn.disabled = true; nextBtn.style.display = 'none'; submitBtn.disabled = true;
// Show feedback inline const qDiv = document.querySelector('.question'); const optionsLabels = qDiv.querySelectorAll('label');
// Color all options according to correctness optionsLabels.forEach(label => { const input = label.querySelector('input[type="radio"]'); const qIndex = currentQuestionIndex; const optionIndex = parseInt(input.value); const correctAnswer = questions[qIndex].answer;
label.classList.remove('correct', 'incorrect');
if (optionIndex === correctAnswer) { label.classList.add('correct'); }
if (userAnswers[qIndex] === optionIndex && optionIndex !== correctAnswer) { label.classList.add('incorrect'); } });
// Calculate score and summary let score = 0; for (let i = 0; i < questions.length; i++) { if (userAnswers[i] === questions[i].answer) score++; } const percent = ((score / questions.length) * 100).toFixed(2);
resultSummary.innerHTML = ` <strong>Test Completed!</strong><br /> Your score: ${score} out of ${questions.length} (${percent}%)<br /> ${percent >= 70 ? 'Congratulations! You passed the test.' : 'You may need to review and try again.'} `; resultSummary.style.display = 'block'; });
// Render the first question initially renderQuestion(currentQuestionIndex);</script></body></html>
Academic Success through better knowledge, skills , and attitude
Academic Success through better knowledge, skills , and attitude