Interactive LLM Quiz body { font-family: 'Inter', sans-serif; } .quiz-container { transition: opacity 0.5s ease-in-out; } .option-btn { transition: background-color 0.3s, transform 0.2s; } .option-btn:hover { transform: translateY(-2px); } .correct { background-color: #22c55e !important; /* Green-500 */ color: white !important; border-color: #16a34a !important; /* Green-600 */ } .incorrect { background-color: #ef4444 !important; /* Red-500 */ color: white !important; border-color: #dc2626 !important; /* Red-600 */ } Welcome to the LLM Quiz!

Test your knowledge on AI Language Models.

Start Quiz Question /5 Score: 0

Next Quiz Complete!

Your final score is

Answer Review: Play Again // --- Quiz Data --- const quizData = [ { question: "Which LLM is particularly renowned for generating highly artistic and detailed images from text prompts?", options: ["BERT", "Midjourney", "LLaMA 3", "GPT-4"], answer: "Midjourney" }, { question: "For a scientific researcher needing to summarize dense academic papers and analyze complex data, which model's large context window would be most beneficial?", options: ["DALL-E 3", "Claude 3.5 Sonnet", "Stable Diffusion", "Jasper"], answer: "Claude 3.5 Sonnet" }, { question: "A marketing team wants to quickly generate a variety of ad copy and blog posts. Which AI assistant is specifically tailored for content creation tasks?", options: ["Scite", "Architechtures", "Jasper", "Gemini 2.5 Pro"], answer: "Jasper" }, { question: "A developer is creating a personalized learning app that acts as an intelligent tutor. Which Google model is fine-tuned specifically for educational purposes?", options: ["LearnLM", "PaLM 2", "BERT", "T5"], answer: "LearnLM" }, { question: "An architect wants to generate multiple building design concepts quickly based on a set of constraints. Which specialized AI platform would be most suitable?", options: ["Midjourney", "ChatGPT", "Architechtures", "Rytr"], answer: "Architechtures" } ]; // --- State Variables --- let currentQuestionIndex = 0; let score = 0; let userName = ""; // --- DOM Elements --- const welcomeScreen = document.getElementById('welcome-screen'); const quizScreen = document.getElementById('quiz-screen'); const resultsScreen = document.getElementById('results-screen'); const usernameInput = document.getElementById('username'); const questionNumberEl = document.getElementById('question-number'); const questionTextEl = document.getElementById('question-text'); const optionsContainer = document.getElementById('options-container'); const scoreEl = document.getElementById('score'); const nextBtn = document.getElementById('next-btn'); const resultsMessageEl = document.getElementById('results-message'); const finalScoreEl = document.getElementById('final-score'); const answerReviewEl = document.getElementById('answer-review'); // --- Functions --- /** * Starts the quiz after getting the user's name. */ function startQuiz() { userName = usernameInput.value.trim(); if (userName) { welcomeScreen.classList.add('hidden'); quizScreen.classList.remove('hidden'); loadQuestion(); } else { // Simple validation feedback usernameInput.classList.add('border-red-500', 'animate-pulse'); usernameInput.placeholder = "Name cannot be empty!"; setTimeout(() => { usernameInput.classList.remove('border-red-500', 'animate-pulse'); usernameInput.placeholder = "Please enter your name"; }, 2000); } } /** * Loads the current question and its options onto the page. */ function loadQuestion() { // Reset for the new question nextBtn.classList.add('hidden'); optionsContainer.innerHTML = ''; const currentQuestion = quizData[currentQuestionIndex]; questionNumberEl.textContent = currentQuestionIndex + 1; questionTextEl.textContent = currentQuestion.question; scoreEl.textContent = score; // Create and append option buttons currentQuestion.options.forEach(option => { const button = document.createElement('button'); button.textContent = option; button.classList.add('option-btn', 'w-full', 'p-4', 'border-2', 'dark:border-slate-600', 'rounded-lg', 'text-left', 'hover:bg-blue-100', 'dark:hover:bg-slate-700', 'focus:outline-none', 'focus:ring-2', 'focus:ring-blue-500'); button.onclick = () => selectAnswer(button, option); optionsContainer.appendChild(button); }); } /** * Handles the user's answer selection. * @param {HTMLButtonElement} selectedButton - The button element that was clicked. * @param {string} selectedOption - The text content of the selected option. */ function selectAnswer(selectedButton, selectedOption) { const currentQuestion = quizData[currentQuestionIndex]; const isCorrect = selectedOption === currentQuestion.answer; if (isCorrect) { score++; scoreEl.textContent = score; selectedButton.classList.add('correct'); } else { selectedButton.classList.add('incorrect'); } // Disable all buttons and show the correct answer Array.from(optionsContainer.children).forEach(button => { button.disabled = true; if (button.textContent === currentQuestion.answer) { button.classList.add('correct'); } }); // Show the next button if (currentQuestionIndex < quizData.length - 1) { nextBtn.textContent = 'Next Question'; } else { nextBtn.textContent = 'Show Results'; } nextBtn.classList.remove('hidden'); } /** * Moves to the next question or shows the results. */ function nextQuestion() { currentQuestionIndex++; if (currentQuestionIndex < quizData.length) { loadQuestion(); } else { showResults(); } } /** * Displays the final results and answer review. */ function showResults() { quizScreen.classList.add('hidden'); resultsScreen.classList.remove('hidden'); resultsMessageEl.textContent = `Well done, ${userName}!`; finalScoreEl.textContent = `${score} / ${quizData.length}`; // Build the answer review section answerReviewEl.innerHTML = ''; quizData.forEach((question, index) => { const reviewItem = document.createElement('div'); reviewItem.classList.add('p-4', 'bg-slate-100', 'dark:bg-slate-700', 'rounded-lg'); reviewItem.innerHTML = ` <p class="font-semibold">${index + 1}. ${question.question}</p> <p class="text-green-600 dark:text-green-400 mt-1"><strong>Correct Answer:</strong> ${question.answer}</p> `; answerReviewEl.appendChild(reviewItem); }); } /** * Resets the quiz to the welcome screen. */ function restartQuiz() { currentQuestionIndex = 0; score = 0; userName = ""; usernameInput.value = ""; resultsScreen.classList.add('hidden'); welcomeScreen.classList.remove('hidden'); }

The post LLM Quiz first appeared on Ronald Hadrian.