

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cheeseopardy! - Cheese 101</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<link href="/css/editorial.css?v=20260914" rel="stylesheet">

    <link href="/css/editorial-games.css?v=2026091406" rel="stylesheet">
</head>
<body class="editorial-page editorial-game">
<header class="editorial-nameplate">
    <a href="/" class="editorial-brand" aria-label="Pagosa Cheesemongers home">Pagosa <span>Cheesemongers</span></a>
    <p>A journal for the cheese curious <span>Pagosa Springs, Colorado</span></p>
</header>


<main id="game-container" class="jeopardy-stage">
    <div class="jeopardy-lights" aria-hidden="true"></div>
    <header class="jeopardy-header">
        <div>
            <nav class="jeopardy-breadcrumb" aria-label="Breadcrumb"><a href="/game/">Games</a><span>/</span><a href="/jeopardy/">Choose a board</a></nav>
            <p class="jeopardy-kicker">Cheese 101</p>
            <h1>Cheeseopardy!</h1>
            <p class="jeopardy-course">Tonight’s course: Cheese 101</p>
        </div>
        <div id="score-display" aria-live="polite"><span>Score</span><strong class="score">$0</strong></div>
    </header>

    <div class="jeopardy-instructions"><span>Choose any value on the board</span><span id="clues-remaining"></span></div>

    
        <div class="jeopardy-board-wrap">
            <div class="jeopardy-mobile-category-control">
                <label for="mobile-category-select">Choose a category</label>
                <select id="mobile-category-select"></select>
                <span id="mobile-category-position" aria-live="polite"></span>
            </div>
            <div id="game-board" style="--category-count: 5"></div>
        </div>
        <div id="game-complete" class="game-complete" tabindex="-1" hidden>
            <p>Board cleared</p>
            <h2>Cheeseopardy complete!</h2>
            <p>Your final score is <strong id="final-score">$0</strong>.</p>
            <div><button type="button" id="play-again">Build a new board</button><a href="/jeopardy/">Choose another topic</a></div>
        </div>
    
</main>

<div id="clue-modal" role="dialog" aria-modal="true" aria-labelledby="modal-category" aria-describedby="modal-clue">
    <div class="modal-content">
        <button type="button" class="clue-modal-close" id="close-modal" aria-label="Close clue">&times;</button>
        <p class="modal-value" id="modal-value"></p>
        <h2 id="modal-category">Category</h2>
        <p id="modal-clue">Clue</p>
        <form id="daily-double-form" class="daily-double-panel" hidden>
            <p class="daily-double-title">Daily Double</p>
            <p>Choose your wager before the clue is revealed.</p>
            <label for="wager-input">Your wager <span id="wager-limit"></span></label>
            <div class="answer-entry">
                <input type="number" id="wager-input" min="0" step="100" inputmode="numeric" required>
                <button type="submit" id="submit-wager">Reveal the clue</button>
            </div>
        </form>
        <div id="answer-form">
            <p class="response-label">Choose your response</p>
            <div id="modal-choices" class="jeopardy-answer-choices"></div>
        </div>
        <div id="answer-feedback" class="answer-feedback" hidden aria-live="polite">
            <p id="feedback-result"></p>
            <p>The accepted answer: <strong id="correct-answer"></strong></p>
            <button type="button" id="continue-game">Back to the board</button>
        </div>
    </div>
</div>


<script>
    const serializedGameData = {"categories":[{"name":"Module 1 - Milk & Microbes","clues":[{"choices":["Fat, protein, lactose, water","Fat, protein, salt, vinegar","Protein, salt, rennet, water","Water, acid, salt, protein"],"clue":"What are the four main components of milk that serve as the building blocks for cheese?","answer":"Fat, protein, lactose, water","value":100},{"choices":["Less flavor","Presence of natural microflora, including pathogens","Thinner rind","Higher salt content"],"clue":"What major factor makes raw milk cheeses riskier from a food safety perspective than pasteurized?","answer":"Presence of natural microflora, including pathogens","value":200},{"choices":["The mixing of curd and whey","The process of aging cheese in a controlled environment","The coagulation of milk","Separating curds manually"],"clue":"What is 'affinage' in the context of cheese?","answer":"The process of aging cheese in a controlled environment","value":300},{"choices":["Prevents spoilage and removes pathogens","Makes cheese age faster","Improves yield","Increases milk fat"],"clue":"Why is rigorous sanitation essential in cheesemaking?","answer":"Prevents spoilage and removes pathogens","value":400},{"choices":["Salt","Fat","Citrate","Casein"],"clue":"What milk component is metabolized by aroma cultures to create a buttery flavor?","answer":"Citrate","value":500}]},{"name":"Module 2 - From Milk to Curd","clues":[{"choices":["Pure acid coagulation","Pure rennet coagulation","A hybrid of acid and rennet coagulation","No coagulation"],"clue":"A cheese like Camembert is an example of which coagulation pathway?","answer":"A hybrid of acid and rennet coagulation","value":100},{"choices":["Acidification","Enzymatic action (rennet)","Fermentation","Radiation"],"clue":"Which of the following is NOT a method used for coagulating milk in cheesemaking?","answer":"Radiation","value":200},{"choices":["Sodium chloride","Citric acid","Magnesium sulfate","Calcium carbonate"],"clue":"Which direct acid can be added to milk for rapid acid coagulation?","answer":"Citric acid","value":300},{"choices":["Chymosin","Direct acid or lactic acid from bacteria","Calcium chloride","Fat globules"],"clue":"What is the primary agent in acid coagulation?","answer":"Direct acid or lactic acid from bacteria","value":400},{"choices":["pH 7.0","pH 4.6","pH 5.8","pH 3.6"],"clue":"At what pH does a milk protein (casein) have no net electrical charge, leading to acid coagulation?","answer":"pH 4.6","value":500}]},{"name":"Module 3 - The Transformation: Salting & Aging","clues":[{"choices":["Temperature and humidity","Air pressure and light","Oxygen and wind speed","Altitude and water source"],"clue":"Which environmental conditions are most critical in a cheese cave for aging?","answer":"Temperature and humidity","value":100},{"choices":["Natural","Bloomy","Washed","Waxed"],"clue":"Cheeses like Limburger, Taleggio, and Époisses develop their key characteristics through which type of rind?","answer":"Washed","value":200},{"choices":["They are dipped or brushed with food-grade paraffin wax, sealing them from oxygen","They bloom with white mold","Their rinds are sticky and orange","They are washed with brine"],"clue":"Which characteristic distinguishes waxed rind cheeses?","answer":"They are dipped or brushed with food-grade paraffin wax, sealing them from oxygen","value":300},{"choices":["A layer of mold","A gooey, liquid layer just beneath the rind created by enzyme breakdown","The border between wax and cheese","A hard, dry region"],"clue":"What is the 'creamline' in a bloomy rind cheese?","answer":"A gooey, liquid layer just beneath the rind created by enzyme breakdown","value":400},{"choices":["Tomme de Savoie and Stilton","Gouda and Edam","Parmesan and Pecorino Romano","Camembert and Brie"],"clue":"Which cheeses are classic examples of waxed rind cheeses?","answer":"Gouda and Edam","value":500}]},{"name":"Module 4 - Styles & Families","clues":[{"choices":["Ricotta","Mozzarella","Feta","Cheddar"],"clue":"Which cheese is made traditionally from the 're-cooking' of whey?","answer":"Ricotta","value":100},{"choices":["Soft-Ripened","Hard","Curdled","Blue"],"clue":"Which is NOT one of the six main cheese families by texture/moisture listed in the module?","answer":"Curdled","value":200},{"choices":["Caves of Normandy","Combalou caves in Roquefort-sur-Soulzon","Underground cellars in Paris","Italian Alpine caves"],"clue":"Roquefort must legally be aged in which location?","answer":"Combalou caves in Roquefort-sur-Soulzon","value":300},{"choices":["Acidification","Rennet addition","Pasteurization","Lactic acid fermentation"],"clue":"Which of the following is NOT a method of coagulation in cheesemaking?","answer":"Pasteurization","value":400},{"choices":["Coagulation of milk","Aging or ripening cheese","Mixing herbs and spices","Brining cheese wheels"],"clue":"What does the process of affinage primarily refer to?","answer":"Aging or ripening cheese","value":500}]},{"name":"Module 5 - Buying, Storage, & Service: A Comprehensive Study Guide","clues":[{"choices":["Providing pairing advice","Ensuring cheese is at its peak","Offering samples to customers","All of the above"],"clue":"What role does the cheese monger play at a cut-to-order counter?","answer":"All of the above","value":100},{"choices":["Salt","Powdered cellulose","Annatto","Vinegar"],"clue":"What is a common additive in pre-shredded cheese that can affect melting?","answer":"Powdered cellulose","value":200},{"choices":["Parchment paper","Wax paper","Plastic cling film","Specialty cheese paper"],"clue":"Which of the following is NOT a recommended material for wrapping cheese?","answer":"Plastic cling film","value":300},{"choices":["Bridge/complement","Contrast","Regional","Aging synergy"],"clue":"Which principle is illustrated by pairing a wine and cheese from the same region?","answer":"Regional","value":400},{"choices":["To maintain optimal humidity and prevent mold or sliminess","To save refrigerator space","To add flavor","To make the cheese softer"],"clue":"What is the purpose of rewrapping cheese in fresh paper or material during storage?","answer":"To maintain optimal humidity and prevent mold or sliminess","value":500}]}]};
    const readGameValue = (record, key) => record[key] ?? record[key.toUpperCase()];
    const gameData = {
        categories: (readGameValue(serializedGameData, 'categories') || []).map(category => ({
            name: readGameValue(category, 'name'),
            clues: (readGameValue(category, 'clues') || []).map(clue => ({
                value: readGameValue(clue, 'value'),
                clue: readGameValue(clue, 'clue'),
                answer: readGameValue(clue, 'answer'),
                choices: readGameValue(clue, 'choices') || []
            }))
        }))
    };

    document.addEventListener('DOMContentLoaded', () => {
        let score = 0;
        let answeredCount = 0;
        let activeClue = null;
        let activeButton = null;
        let lastFocusedButton = null;
        let activeWager = 0;
        let isDailyDouble = false;

        const totalClues = gameData.categories.reduce((total, category) => total + category.clues.length, 0);
        const dailyDoubleCandidates = [];
        gameData.categories.forEach((category, categoryIndex) => {
            category.clues.forEach((clue, clueIndex) => {
                if (clueIndex > 0) dailyDoubleCandidates.push(`${categoryIndex}:${clueIndex}`);
            });
        });
        const dailyDoubleLocation = dailyDoubleCandidates[Math.floor(Math.random() * dailyDoubleCandidates.length)];
        const gameBoard = document.getElementById('game-board');
        const mobileCategorySelect = document.getElementById('mobile-category-select');
        const mobileCategoryPosition = document.getElementById('mobile-category-position');
        const scoreDisplay = document.querySelector('#score-display .score');
        const cluesRemaining = document.getElementById('clues-remaining');
        const clueModal = document.getElementById('clue-modal');
        const modalCategory = document.getElementById('modal-category');
        const modalValue = document.getElementById('modal-value');
        const modalClue = document.getElementById('modal-clue');
        const closeModalButton = document.getElementById('close-modal');
        const dailyDoubleForm = document.getElementById('daily-double-form');
        const wagerInput = document.getElementById('wager-input');
        const wagerLimit = document.getElementById('wager-limit');
        const answerForm = document.getElementById('answer-form');
        const modalChoices = document.getElementById('modal-choices');
        const answerFeedback = document.getElementById('answer-feedback');
        const feedbackResult = document.getElementById('feedback-result');
        const correctAnswer = document.getElementById('correct-answer');
        const continueButton = document.getElementById('continue-game');
        const gameComplete = document.getElementById('game-complete');

        function formatMoney(value) {
            return `${value < 0 ? '-' : ''}$${Math.abs(value).toLocaleString()}`;
        }

        function normalizeAnswer(value) {
            return value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9\s]/g, ' ').replace(/\s+/g, ' ').trim();
        }

        function answersMatch(userAnswer, acceptedAnswer) {
            const user = normalizeAnswer(userAnswer);
            const accepted = normalizeAnswer(acceptedAnswer);
            return user === accepted || (user.length >= 4 && accepted.length >= 4 && (user.includes(accepted) || accepted.includes(user)));
        }

        function updateStatus() {
            scoreDisplay.textContent = formatMoney(score);
            scoreDisplay.classList.toggle('score-negative', score < 0);
            cluesRemaining.textContent = `${totalClues - answeredCount} clues remaining`;
            gameData.categories.forEach((category, categoryIndex) => {
                const option = mobileCategorySelect.options[categoryIndex];
                const column = gameBoard.querySelector(`[data-category-column="${categoryIndex}"]`);
                if (!option || !column) return;
                const remaining = column.querySelectorAll('.clue-box:not(:disabled)').length;
                option.textContent = remaining ? `${category.name} · ${remaining} left` : `✓ ${category.name}`;
            });
        }

        function showMobileCategory(categoryIndex) {
            const boundedIndex = Math.max(0, Math.min(gameData.categories.length - 1, Number(categoryIndex) || 0));
            gameBoard.querySelectorAll('.category-column').forEach((column, columnIndex) => {
                column.classList.toggle('mobile-active', columnIndex === boundedIndex);
            });
            mobileCategorySelect.value = String(boundedIndex);
            mobileCategoryPosition.textContent = `Category ${boundedIndex + 1} of ${gameData.categories.length}`;
        }

        function showNextUnfinishedCategory(currentCategoryIndex) {
            for (let offset = 1; offset <= gameData.categories.length; offset += 1) {
                const candidateIndex = (currentCategoryIndex + offset) % gameData.categories.length;
                const candidate = gameBoard.querySelector(`[data-category-column="${candidateIndex}"] .clue-box:not(:disabled)`);
                if (candidate) {
                    showMobileCategory(candidateIndex);
                    return;
                }
            }
        }

        function buildBoard() {
            gameData.categories.forEach((category, categoryIndex) => {
                const column = document.createElement('section');
                column.className = `category-column${categoryIndex === 0 ? ' mobile-active' : ''}`;
                column.style.setProperty('--column-index', categoryIndex);
                column.dataset.categoryColumn = categoryIndex;

                const option = document.createElement('option');
                option.value = categoryIndex;
                option.textContent = category.name;
                mobileCategorySelect.appendChild(option);

                const title = document.createElement('h2');
                title.className = 'category-title';
                title.textContent = category.name;
                column.appendChild(title);

                category.clues.forEach((clue, clueIndex) => {
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'clue-box';
                    button.textContent = `$${Number(clue.value).toLocaleString()}`;
                    button.dataset.categoryIndex = categoryIndex;
                    button.dataset.clueIndex = clueIndex;
                    button.setAttribute('aria-label', `${category.name} for $${Number(clue.value).toLocaleString()}`);
                    button.addEventListener('click', openClue);
                    column.appendChild(button);
                });

                gameBoard.appendChild(column);
            });
            showMobileCategory(0);
            updateStatus();
        }

        function renderChoices(choices) {
            const shuffledChoices = [...choices];
            for (let index = shuffledChoices.length - 1; index > 0; index -= 1) {
                const swapIndex = Math.floor(Math.random() * (index + 1));
                [shuffledChoices[index], shuffledChoices[swapIndex]] = [shuffledChoices[swapIndex], shuffledChoices[index]];
            }

            modalChoices.replaceChildren();
            shuffledChoices.forEach((choice, choiceIndex) => {
                const button = document.createElement('button');
                const letter = document.createElement('span');
                button.type = 'button';
                letter.setAttribute('aria-hidden', 'true');
                letter.textContent = String.fromCharCode(65 + choiceIndex);
                button.appendChild(letter);
                button.append(document.createTextNode(choice));
                button.addEventListener('click', () => submitAnswer(choice));
                modalChoices.appendChild(button);
            });
        }

        function openClue(event) {
            activeButton = event.currentTarget;
            lastFocusedButton = activeButton;
            const categoryIndex = Number(activeButton.dataset.categoryIndex);
            const clueIndex = Number(activeButton.dataset.clueIndex);
            const category = gameData.categories[categoryIndex];
            activeClue = category.clues[clueIndex];
            isDailyDouble = `${categoryIndex}:${clueIndex}` === dailyDoubleLocation;
            activeWager = Number(activeClue.value);

            modalCategory.textContent = category.name;
            modalValue.textContent = isDailyDouble ? 'Daily Double' : `$${Number(activeClue.value).toLocaleString()}`;
            modalClue.textContent = activeClue.clue;
            modalClue.hidden = isDailyDouble;
            renderChoices(activeClue.choices);
            answerForm.hidden = isDailyDouble;
            dailyDoubleForm.hidden = !isDailyDouble;
            answerFeedback.hidden = true;
            closeModalButton.hidden = isDailyDouble;
            clueModal.classList.add('visible');
            clueModal.classList.toggle('daily-double-active', isDailyDouble);
            document.body.classList.add('modal-open');
            if (isDailyDouble) {
                const maximumWager = Math.max(score, 1000);
                wagerInput.max = maximumWager;
                wagerInput.value = Math.min(Math.max(score, 0), maximumWager);
                wagerLimit.textContent = `(maximum ${formatMoney(maximumWager)})`;
                wagerInput.focus();
            } else {
                modalChoices.querySelector('button').focus();
            }
        }

        function closeModal(force = false) {
            if (isDailyDouble && answerFeedback.hidden && !force) return;
            clueModal.classList.remove('visible');
            clueModal.classList.remove('daily-double-active');
            document.body.classList.remove('modal-open');
            activeClue = null;
            activeButton = null;
            activeWager = 0;
            isDailyDouble = false;
            if (lastFocusedButton && !lastFocusedButton.disabled) {
                lastFocusedButton.focus();
            } else {
                const nextClue = gameBoard.querySelector('.clue-box:not(:disabled)');
                if (nextClue) nextClue.focus();
            }
        }

        function submitWager(event) {
            event.preventDefault();
            const maximumWager = Math.max(score, 1000);
            const wager = Number(wagerInput.value);
            if (!Number.isFinite(wager) || wager < 0 || wager > maximumWager) {
                wagerInput.setCustomValidity(`Choose a wager from $0 to ${formatMoney(maximumWager)}.`);
                wagerInput.reportValidity();
                return;
            }
            wagerInput.setCustomValidity('');
            activeWager = wager;
            dailyDoubleForm.hidden = true;
            modalClue.hidden = false;
            answerForm.hidden = false;
            modalChoices.querySelector('button').focus();
        }

        function submitAnswer(selectedAnswer) {
            const submitted = selectedAnswer.trim();
            if (!activeClue || !submitted) return;

            const acceptedAnswers = activeClue.answer.split('|').map(answer => answer.trim()).filter(Boolean);
            const isCorrect = acceptedAnswers.some(answer => answersMatch(submitted, answer));
            score += isCorrect ? activeWager : -activeWager;
            answeredCount += 1;

            activeButton.disabled = true;
            activeButton.classList.add('answered', isCorrect ? 'answered-correct' : 'answered-incorrect');
            activeButton.textContent = isCorrect ? '✓' : '—';
            answerForm.hidden = true;
            answerFeedback.hidden = false;
            closeModalButton.hidden = true;
            feedbackResult.textContent = isCorrect ? `Correct! +${formatMoney(activeWager)}` : `Not quite. −${formatMoney(activeWager)}`;
            feedbackResult.className = isCorrect ? 'feedback-correct' : 'feedback-incorrect';
            correctAnswer.textContent = acceptedAnswers[0] || activeClue.answer;
            updateStatus();
            continueButton.focus();
        }

        function continueGame() {
            const completedCategoryIndex = lastFocusedButton ? Number(lastFocusedButton.dataset.categoryIndex) : 0;
            const completedCategory = gameBoard.querySelector(`[data-category-column="${completedCategoryIndex}"]`);
            const categoryIsComplete = completedCategory && !completedCategory.querySelector('.clue-box:not(:disabled)');
            if (categoryIsComplete && answeredCount < totalClues) showNextUnfinishedCategory(completedCategoryIndex);
            closeModal(true);
            if (answeredCount === totalClues) {
                document.getElementById('final-score').textContent = formatMoney(score);
                gameComplete.hidden = false;
                const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
                gameComplete.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'center' });
                gameComplete.focus({ preventScroll: true });
            }
        }

        buildBoard();
        mobileCategorySelect.addEventListener('change', event => showMobileCategory(event.target.value));
        dailyDoubleForm.addEventListener('submit', submitWager);
        continueButton.addEventListener('click', continueGame);
        closeModalButton.addEventListener('click', () => closeModal());
        document.getElementById('play-again').addEventListener('click', () => window.location.reload());
        clueModal.addEventListener('click', event => { if (event.target === clueModal && !isDailyDouble && answerFeedback.hidden) closeModal(); });
        document.addEventListener('keydown', event => {
            if (event.key === 'Escape' && clueModal.classList.contains('visible') && !isDailyDouble && answerFeedback.hidden) closeModal();
        });
    });
</script>

</body>
</html>