Weekend Project: Building a Complete JavaScript Program

Complete Implementation

Here's a complete implementation of our quiz game. You can adapt and extend this code as needed:

// Quiz Game Implementation

// -----------------------
// Data Structures
// -----------------------

// Questions Database
const quizQuestions = [
    // JavaScript Category
    {
        id: 1,
        category: 'JavaScript',
        difficulty: 'easy',
        type: 'multiple',
        question: 'Which keyword is used to declare variables in JavaScript?',
        options: ['var', 'int', 'string', 'declare'],
        correctAnswer: 'var',
        explanation: 'In JavaScript, "var" is one of the keywords used to declare variables along with "let" and "const".',
        points: 10
    },
    {
        id: 2,
        category: 'JavaScript',
        difficulty: 'easy',
        type: 'boolean',
        question: 'JavaScript is the same as Java.',
        options: ['True', 'False'],
        correctAnswer: 'False',
        explanation: 'JavaScript and Java are completely different programming languages with different syntax and use cases.',
        points: 10
    },
    {
        id: 3,
        category: 'JavaScript',
        difficulty: 'medium',
        type: 'multiple',
        question: 'Which method is used to add an element at the end of an array?',
        options: ['push()', 'append()', 'addToEnd()', 'insert()'],
        correctAnswer: 'push()',
        explanation: 'The push() method adds one or more elements to the end of an array and returns the new length.',
        points: 20
    },
    {
        id: 4,
        category: 'JavaScript',
        difficulty: 'hard',
        type: 'multiple',
        question: 'What does the "this" keyword refer to in JavaScript?',
        options: [
            'The current function', 
            'The object the function belongs to', 
            'The global window object', 
            'It depends on how the function is called'
        ],
        correctAnswer: 'It depends on how the function is called',
        explanation: 'The value of "this" depends on how the function is called. It can refer to different objects depending on where it is used.',
        points: 30
    },
    
    // HTML Category
    {
        id: 5,
        category: 'HTML',
        difficulty: 'easy',
        type: 'multiple',
        question: 'What does HTML stand for?',
        options: [
            'Hyper Text Markup Language', 
            'Highly Typed Modern Language', 
            'Home Tool Markup Language', 
            'Hyperlink Text Management Language'
        ],
        correctAnswer: 'Hyper Text Markup Language',
        explanation: 'HTML stands for Hyper Text Markup Language, which is the standard markup language for creating web pages.',
        points: 10
    },
    {
        id: 6,
        category: 'HTML',
        difficulty: 'medium',
        type: 'boolean',
        question: 'HTML is a programming language.',
        options: ['True', 'False'],
        correctAnswer: 'False',
        explanation: 'HTML is a markup language, not a programming language. It describes the structure of web pages.',
        points: 20
    },
    {
        id: 7,
        category: 'HTML',
        difficulty: 'medium',
        type: 'multiple',
        question: 'Which HTML tag is used to create a hyperlink?',
        options: ['<link>', '<a>', '<href>', '<hyperlink>'],
        correctAnswer: '<a>',
        explanation: 'The <a> (anchor) tag is used to create hyperlinks in HTML with the href attribute specifying the link destination.',
        points: 20
    },
    
    // CSS Category
    {
        id: 8,
        category: 'CSS',
        difficulty: 'easy',
        type: 'multiple',
        question: 'What does CSS stand for?',
        options: [
            'Cascading Style Sheets', 
            'Creative Style Sheets', 
            'Computer Style Sheets', 
            'Colorful Style Sheets'
        ],
        correctAnswer: 'Cascading Style Sheets',
        explanation: 'CSS stands for Cascading Style Sheets, which is used to style HTML elements and control their layout.',
        points: 10
    },
    {
        id: 9,
        category: 'CSS',
        difficulty: 'medium',
        type: 'multiple',
        question: 'Which property is used to change the background color?',
        options: ['color', 'bgcolor', 'background', 'background-color'],
        correctAnswer: 'background-color',
        explanation: 'The background-color property is used to set the background color of an element in CSS.',
        points: 20
    },
    {
        id: 10,
        category: 'CSS',
        difficulty: 'hard',
        type: 'multiple',
        question: 'Which CSS property is used to create a flexible box layout?',
        options: ['flex', 'display: flex', 'flexbox', 'flexible'],
        correctAnswer: 'display: flex',
        explanation: 'To create a flexbox layout, you set an element\'s display property to "flex".',
        points: 30
    }
];

// -----------------------
// Game State and Variables
// -----------------------

// Game state
let gameState = {
    currentQuestionIndex: 0,
    score: 0,
    correctAnswers: 0,
    incorrectAnswers: 0,
    selectedCategory: null,
    currentQuestions: [],
    gameStarted: false,
    gameOver: false
};

// -----------------------
// Game Engine Functions
// -----------------------

// Initialize and start the game
function startGame(category = null) {
    // Reset game state
    gameState.currentQuestionIndex = 0;
    gameState.score = 0;
    gameState.correctAnswers = 0;
    gameState.incorrectAnswers = 0;
    gameState.gameOver = false;
    gameState.gameStarted = true;
    
    // Filter questions by category if provided
    if (category) {
        gameState.selectedCategory = category;
        gameState.currentQuestions = quizQuestions.filter(q => q.category === category);
    } else {
        gameState.selectedCategory = 'All Categories';
        gameState.currentQuestions = [...quizQuestions];
    }
    
    // Shuffle questions to make each game different
    shuffleArray(gameState.currentQuestions);
    
    // Display first question
    displayCurrentQuestion();
    
    console.log(`Game started with category: ${gameState.selectedCategory}`);
    updateUI();
}

// Move to the next question or end the game
function nextQuestion() {
    if (gameState.currentQuestionIndex < gameState.currentQuestions.length - 1) {
        gameState.currentQuestionIndex++;
        displayCurrentQuestion();
    } else {
        endGame();
    }
}

// Process the user's answer
function processAnswer(userAnswer) {
    if (gameState.gameOver) return;
    
    const currentQuestion = gameState.currentQuestions[gameState.currentQuestionIndex];
    const isCorrect = userAnswer === currentQuestion.correctAnswer;
    
    if (isCorrect) {
        gameState.score += calculatePoints(currentQuestion);
        gameState.correctAnswers++;
        displayFeedback(true, currentQuestion.explanation);
    } else {
        gameState.incorrectAnswers++;
        displayFeedback(false, currentQuestion.explanation);
    }
    
    // Small delay before moving to next question
    setTimeout(nextQuestion, 2000);
    updateUI();
}

// End the game and display results
function endGame() {
    gameState.gameOver = true;
    displayGameResults();
    updateUI();
}

// -----------------------
// UI Functions
// -----------------------

// Display the current question
function displayCurrentQuestion() {
    if (gameState.gameOver) return;
    
    const currentQuestion = gameState.currentQuestions[gameState.currentQuestionIndex];
    
    console.log('\n' + '='.repeat(50));
    console.log(`Question ${gameState.currentQuestionIndex + 1} of ${gameState.currentQuestions.length}`);
    console.log(`Category: ${currentQuestion.category} | Difficulty: ${currentQuestion.difficulty}`);
    console.log('='.repeat(50));
    
    console.log(`\n${currentQuestion.question}\n`);
    
    // Display options based on question type
    displayOptions(currentQuestion);
    
    // In a real implementation, this would update DOM elements
}

// Display answer options
function displayOptions(question) {
    console.log('Options:');
    question.options.forEach((option, index) => {
        console.log(`${index + 1}. ${option}`);
    });
    
    console.log('\nEnter your answer (1-' + question.options.length + '):');
    
    // In a browser implementation, this would create buttons or radio inputs
    // For this example, we'll simulate user input in the executeGame function
}

// Display feedback for the answer
function displayFeedback(isCorrect, explanation) {
    console.log('\n' + '-'.repeat(50));
    if (isCorrect) {
        console.log('✅ CORRECT! Great job!');
    } else {
        console.log('❌ INCORRECT! Better luck next time.');
    }
    console.log(`Explanation: ${explanation}`);
    console.log('-'.repeat(50) + '\n');
}

// Display final game results
function displayGameResults() {
    console.log('\n' + '*'.repeat(50));
    console.log('GAME OVER!');
    console.log('*'.repeat(50));
    
    console.log(`\nFinal Score: ${gameState.score}`);
    console.log(`Correct Answers: ${gameState.correctAnswers}`);
    console.log(`Incorrect Answers: ${gameState.incorrectAnswers}`);
    
    const percentage = (gameState.correctAnswers / gameState.currentQuestions.length) * 100;
    console.log(`Accuracy: ${percentage.toFixed(1)}%`);
    
    let performance;
    if (percentage >= 90) {
        performance = "Outstanding! You're a master!";
    } else if (percentage >= 70) {
        performance = "Great job! You know your stuff!";
    } else if (percentage >= 50) {
        performance = "Good effort! Keep practicing!";
    } else {
        performance = "Keep learning! You'll improve with practice!";
    }
    
    console.log(`\nPerformance: ${performance}`);
    console.log('\nWould you like to play again? (yes/no)');
}

// Update UI elements
function updateUI() {
    // In a real implementation, this would update DOM elements like score display
    console.log(`\nCurrent Score: ${gameState.score} | Q: ${gameState.currentQuestionIndex + 1}/${gameState.currentQuestions.length}`);
}

// Display categories for selection
function displayCategories() {
    // Get unique categories
    const categories = [...new Set(quizQuestions.map(q => q.category))];
    
    console.log('\n=== SELECT A CATEGORY ===');
    categories.forEach((category, index) => {
        console.log(`${index + 1}. ${category}`);
    });
    console.log(`${categories.length + 1}. All Categories`);
    
    // In a browser implementation, this would create clickable category options
}

// -----------------------
// Utility Functions
// -----------------------

// Calculate points based on question difficulty
function calculatePoints(question) {
    let points = question.points || 10; // Default to 10 if not specified
    
    // Adjust for fast answers in a real implementation
    // points += Math.floor(timeBonus);
    
    return points;
}

// Shuffle array (Fisher-Yates algorithm)
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

// Get available categories
function getCategories() {
    return [...new Set(quizQuestions.map(q => q.category))];
}

// -----------------------
// Game Execution
// -----------------------

// Function to simulate game execution in a console environment
function executeGame() {
    console.log('WELCOME TO THE INTERACTIVE QUIZ GAME!');
    console.log('Test your knowledge across different programming topics.');
    
    // Display categories
    displayCategories();
    
    // For demo purposes, select a category
    const selectedCategory = 'JavaScript'; // Simulated user selection
    console.log(`\nYou selected: ${selectedCategory}`);
    
    // Start the game with selected category
    startGame(selectedCategory);
    
    // Simulate answering questions (in a real app, this would be based on user input)
    simulateAnswers();
}

// Function to simulate user providing answers
function simulateAnswers() {
    // Simulated answers (correct and incorrect)
    const simulatedAnswers = ['var', 'False', 'append()', 'The current function'];
    
    // Process each answer with a delay
    simulatedAnswers.forEach((answer, index) => {
        setTimeout(() => {
            if (index < gameState.currentQuestions.length && !gameState.gameOver) {
                console.log(`\nUser selected: ${answer}`);
                processAnswer(answer);
            }
        }, 3000 * (index + 1)); // 3 second delay between answers
    });
}

// Optional: Execute the game to demonstrate functionality
// executeGame();

// -----------------------
// Browser Implementation
// -----------------------

// In a real browser implementation, we would add event listeners:

/*
document.addEventListener('DOMContentLoaded', () => {
    // Set up event listeners for UI elements
    document.getElementById('start-btn').addEventListener('click', () => {
        const category = document.getElementById('category-select').value;
        startGame(category);
    });
    
    document.getElementById('option-container').addEventListener('click', (e) => {
        if (e.target.classList.contains('option-btn')) {
            const userAnswer = e.target.dataset.value;
            processAnswer(userAnswer);
        }
    });
    
    // Initialize the UI
    displayCategories();
});
*/

// Export functions for testing or module use
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        startGame,
        processAnswer,
        calculatePoints,
        getCategories
    };
}