

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Who Wants to be a Cheesonaire? - Module 4 - Styles & Families</title>
    <link rel="stylesheet" href="/millionaire.css?v=2">
    <style>
        .lifelines-panel {
            text-align: center;
            margin-bottom: 20px;
        }
        .lifeline-button {
            background-color: #004a99;
            color: white;
            border: 2px solid #c5c5c5;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
        }
        .lifeline-button:disabled {
            background-color: #555;
            cursor: not-allowed;
        }
        .millionaire-choice-wrapper {
            display: flex;
            align-items: center;
            width: 100%;
        }
        .millionaire-choices.show-poll .millionaire-choice {
            flex-grow: 0;
            flex-shrink: 0;
            width: 40%;
        }
        .audience-poll-bar-container {
            flex-grow: 1;
            height: 20px;
            background-color: #ddd;
            border-radius: 5px;
            margin-left: 10px;
        }
        .audience-poll-bar {
            height: 100%;
            background-color: #4CAF50;
            border-radius: 5px;
            text-align: right;
            color: white;
            line-height: 20px;
        }
        .audience-poll-percentage {
            padding-right: 5px;
            font-weight: bold;
        }
        .winnings-display {
            text-align: center;
            font-size: 1.5em;
            font-weight: bold;
            color: #FFD700; /* Gold color */
            background-color: #003366;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 2px solid #FFD700;
        }
        .millionaire-question {
            background-color: #003366;
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-size: 1.8em;
            margin-bottom: 20px;
            border: 2px solid #FFD700;
        }
    </style>
</head>
<body>

    <div class="millionaire-container">
        <h5 align="center">Cheese 101</h5>
        <p align="center">Module 4 - Styles & Families</p>

        
                <div class="winnings-display">Winnings: $0</div>
                
                
                <div class="game-board">
                    
                    <div class="question-panel">
                        <div class="millionaire-question">Which factor is NOT a main difference between Brie and Camembert?</div>
                        <form action="/cheese-101/millionaire/module-4--styles-and-families.cfm?id=4" method="post" id="gameForm">
                            <input type="hidden" name="action" value="submitAnswer">
                            <input type="hidden" name="choice_id" id="submitted_choice_id" value="">
                            
                            <div class="millionaire-choices">
                                
                                
                                    <div class="millionaire-choice-wrapper">
                                         <div class="millionaire-choice" onclick="selectAnswer(this, 624)">
                                            <button type="button">
                                                <span class="choice-letter">A</span>
                                                <span class="choice-text">Aging time and form size</span>
                                            </button>
                                        </div>
                                        
                                    </div>
                                    
                                
                                    <div class="millionaire-choice-wrapper">
                                         <div class="millionaire-choice" onclick="selectAnswer(this, 623)">
                                            <button type="button">
                                                <span class="choice-letter">B</span>
                                                <span class="choice-text">Coagulation method (acid vs. rennet)</span>
                                            </button>
                                        </div>
                                        
                                    </div>
                                    
                                
                                    <div class="millionaire-choice-wrapper">
                                         <div class="millionaire-choice" onclick="selectAnswer(this, 622)">
                                            <button type="button">
                                                <span class="choice-letter">C</span>
                                                <span class="choice-text">Fat content and addition of cream</span>
                                            </button>
                                        </div>
                                        
                                    </div>
                                    
                                
                                    <div class="millionaire-choice-wrapper">
                                         <div class="millionaire-choice" onclick="selectAnswer(this, 621)">
                                            <button type="button">
                                                <span class="choice-letter">D</span>
                                                <span class="choice-text">Their origin regions</span>
                                            </button>
                                        </div>
                                        
                                    </div>
                                    
                                
                            </div>
                        </form>
                        <form action="/cheese-101/millionaire/module-4--styles-and-families.cfm?id=4" method="post" id="lifelineForm">
                            <input type="hidden" name="action" id="lifelineAction" value="">
                        </form>
                    </div>

                                        <div class="lifelines-panel">
                        <h3>Lifelines</h3>
                        <div class="lifeline-buttons">
                            <button type="button" class="lifeline-button ask-audience"  onclick="useAskTheAudience()">Ask the Audience</button>
                        </div>
                    </div>

                    <div class="money-tree-panel">
                        <h3>Cheese Board</h3>
                        <ol class="millionaire-money-tree">
                            
                                
                                <li class="current-level">
                                    1 &ndash; $100
                                </li>
                            
                                
                                <li class="">
                                    2 &ndash; $200
                                </li>
                            
                                
                                <li class="">
                                    3 &ndash; $300
                                </li>
                            
                                
                                <li class="">
                                    4 &ndash; $500
                                </li>
                            
                                
                                <li class="safety-net">
                                    5 &ndash; $1,000
                                </li>
                            
                                
                                <li class="">
                                    6 &ndash; $2,000
                                </li>
                            
                                
                                <li class="">
                                    7 &ndash; $4,000
                                </li>
                            
                                
                                <li class="">
                                    8 &ndash; $8,000
                                </li>
                            
                                
                                <li class="">
                                    9 &ndash; $16,000
                                </li>
                            
                                
                                <li class="safety-net">
                                    10 &ndash; $32,000
                                </li>
                            
                                
                                <li class="">
                                    11 &ndash; $64,000
                                </li>
                            
                                
                                <li class="">
                                    12 &ndash; $125,000
                                </li>
                            
                                
                                <li class="">
                                    13 &ndash; $250,000
                                </li>
                            
                                
                                <li class="">
                                    14 &ndash; $500,000
                                </li>
                            
                                
                                <li class="safety-net">
                                    15 &ndash; $1 MILLION
                                </li>
                            
                        </ol>
                    </div>

                </div> 
        
    </div>

    <!-- Final Answer Modal -->
    <div class="final-modal-backdrop" id="finalModal" role="dialog" aria-modal="true" aria-labelledby="finalModalTitle" aria-describedby="finalModalDesc">
        <div class="final-modal">
            <h3 id="finalModalTitle">Is that your final cheese?</h3>
            <p id="finalModalDesc">Confirm your selection to lock in your answer.</p>
            <div class="actions">
                <button type="button" class="btn btn-secondary" id="cancelFinalBtn">No, let me change</button>
                <button type="button" class="btn btn-primary" id="confirmFinalBtn">Yes, lock it in</button>
            </div>
        </div>
    </div>

<script>
    function useAskTheAudience() {
        document.getElementById('lifelineAction').value = 'askTheAudience';
        document.getElementById('lifelineForm').submit();
    }

    let selectedChoiceId = null;
    let selectedElement = null;
    let modalOpen = false;

    function selectAnswer(element, choiceId) {
        if (selectedElement) {
            selectedElement.classList.remove('final-answer');
        }
        selectedElement = element;
        selectedChoiceId = choiceId;
        selectedElement.classList.add('final-answer');
        openFinalModal();
    }

    function openFinalModal() {
        const modal = document.getElementById('finalModal');
        modal.style.display = 'flex';
        modalOpen = true;
        // focus confirm for quick keyboard enter
        document.getElementById('confirmFinalBtn').focus();
    }

    function closeFinalModal() {
        const modal = document.getElementById('finalModal');
        modal.style.display = 'none';
        modalOpen = false;
    }

    function confirmFinalAnswer() {
        document.getElementById('submitted_choice_id').value = selectedChoiceId;
        document.getElementById('gameForm').submit();
    }

    // Wire modal buttons
    document.addEventListener('DOMContentLoaded', function() {
        const cancelBtn = document.getElementById('cancelFinalBtn');
        const confirmBtn = document.getElementById('confirmFinalBtn');
        if (cancelBtn && confirmBtn) {
            cancelBtn.addEventListener('click', function() {
                closeFinalModal();
                if (selectedElement) selectedElement.classList.remove('final-answer');
                selectedElement = null;
                selectedChoiceId = null;
            });
            confirmBtn.addEventListener('click', function() {
                closeFinalModal();
                confirmFinalAnswer();
            });
        }
        // Escape to cancel
        document.addEventListener('keydown', function(e) {
            if (modalOpen && e.key === 'Escape') {
                e.preventDefault();
                if (selectedElement) selectedElement.classList.remove('final-answer');
                selectedElement = null;
                selectedChoiceId = null;
                closeFinalModal();
            }
        });
        // Click backdrop to cancel
        const backdrop = document.getElementById('finalModal');
        if (backdrop) {
            backdrop.addEventListener('click', function(e) {
                if (e.target === backdrop) {
                    if (selectedElement) selectedElement.classList.remove('final-answer');
                    selectedElement = null;
                    selectedChoiceId = null;
                    closeFinalModal();
                }
            });
        }
    });
</script>

</body>
</html>