HTML Editor

Edita cÃ³digo
		
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Â¿QuiÃ©n quiere ser millonario?</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #000033;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .game-container {
            display: flex;
            width: 90%;
            max-width: 1200px;
        }
        .game-area {
            flex: 2;
            padding: 20px;
        }
        .sidebar {
            flex: 1;
            padding: 20px;
            background-color: #000066;
            border-radius: 10px;
            margin-left: 20px;
        }
        h1 {
            text-align: center;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        .question-container {
            background-color: #000066;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(255,215,0,0.3);
        }
        .answers-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .answer {
            background-color: #000099;
            padding: 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            box-shadow: 0 0 5px rgba(255,255,255,0.1);
        }
        .answer:hover:not(.disabled) {
            background-color: #0000cc;
            transform: scale(1.05);
        }
        .answer.selected {
            background-color: #ffd700;
            color: #000033;
        }
        .answer.correct {
            background-color: #00cc00;
            animation: pulse 1s infinite;
        }
        .answer.incorrect {
            background-color: #cc0000;
            animation: shake 0.5s;
        }
        .answer.disabled {
            cursor: not-allowed;
            opacity: 0.7;
        }
        .answer-letter {
            font-weight: bold;
            margin-right: 10px;
            font-size: 1.2em;
            color: #ffd700;
        }
        .lifelines-container {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }
        .lifeline {
            background-color: #000099;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            color: white;
            font-size: 1em;
        }
        .lifeline:hover:not(:disabled) {
            background-color: #0000cc;
            transform: scale(1.1);
        }
        .lifeline:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .score-container {
            text-align: center;
            font-size: 1.5em;
            margin-top: 20px;
            color: #ffd700;
        }
        .prize-ladder {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .prize-ladder li {
            padding: 5px;
            margin: 5px 0;
            background-color: #000099;
            border-radius: 5px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .prize-ladder li.active {
            background-color: #ffd700;
            color: #000033;
        }
        .prize-ladder li.safe {
            background-color: #ff6600;
        }
        .message-container {
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
            color: #ff6600;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
        }

        /* Estilos para las ventanas emergentes */
        .modal {
            display: none; /* Oculto por defecto */
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0, 0, 0, 0.5); 
            transition: all 0.5s ease; /* Efecto de zoom */
        }

        .modal-content {
            background-color: #000099;
            margin: 15% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            border-radius: 10px;
            text-align: center;
            color: white;
            transform: scale(0.8);
            transition: transform 0.5s;
        }

        .modal-content p {
            margin: 20px 0;
            font-size: 1.2em;
        }

        .modal-content .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .modal-content .close:hover,
        .modal-content .close:focus {
            color: white;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-area">
            <h1>Â¿QuiÃ©n quiere ser millonario?</h1>
            <div class="question-container">
                <div id="question" class="question"></div>
                <div class="answers-container">
                    <div class="answer" onclick="selectAnswer(0)">
                        <span class="answer-letter">A</span>
                        <span class="answer-text" id="answer0"></span>
                    </div>
                    <div class="answer" onclick="selectAnswer(1)">
                        <span class="answer-letter">B</span>
                        <span class="answer-text" id="answer1"></span>
                    </div>
                    <div class="answer" onclick="selectAnswer(2)">
                        <span class="answer-letter">C</span>
                        <span class="answer-text" id="answer2"></span>
                    </div>
                    <div class="answer" onclick="selectAnswer(3)">
                        <span class="answer-letter">D</span>
                        <span class="answer-text" id="answer3"></span>
                    </div>
                </div>
            </div>
            <div class="lifelines-container">
                <button id="fiftyFifty" class="lifeline" onclick="useFiftyFifty()">50:50</button>
                <button id="phoneAFriend" class="lifeline" onclick="usePhoneAFriend()">Llamar</button>
                <button id="askTheAudience" class="lifeline" onclick="useAskTheAudience()">PÃºblico</button>
            </div>
            <div class="score-container" id="score">PuntuaciÃ³n: â‚¬0</div>
            <div class="message-container" id="message"></div>
        </div>
        <div class="sidebar">
            <ul class="prize-ladder" id="prizeLadder">
                <li class="safe">â‚¬1,000,000</li>
                <li>â‚¬500,000</li>
                <li>â‚¬250,000</li>
                <li>â‚¬125,000</li>
                <li>â‚¬64,000</li>
                <li>â‚¬32,000</li>
                <li>â‚¬16,000</li>
                <li>â‚¬8,000</li>
                <li>â‚¬4,000</li>
                <li>â‚¬2,000</li>
                <li>â‚¬1,000</li>
                <li>â‚¬500</li>
                <li>â‚¬300</li>	
                <li>â‚¬200</li>	
                <li>â‚¬100</li>
                <li class="active">â‚¬0</li>					
             <!--   <li>â‚¬0</li> Escaleta comienza en 0 -->
            </ul>
        </div>
    </div>
    
    <!-- Ventana emergente para el comodÃn 50:50 -->
    <div id="fiftyFiftyModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('fiftyFiftyModal')">×</span>
            <p>Se han eliminado dos respuestas incorrectas.</p>
        </div>
    </div>

    <!-- Ventana emergente para el comodÃn Llamar -->
    <div id="phoneAFriendModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('phoneAFriendModal')">×</span>
            <p>Llamando a un amigo...</p>
        </div>
    </div>

    <!-- Ventana emergente para el comodÃn PÃºblico -->
    <div id="askTheAudienceModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('askTheAudienceModal')">×</span>
            <p>El pÃºblico sugiere la respuesta correcta.</p>
        </div>
    </div>

    <audio id="audioInicio" src="inicio.mp3"></audio>
    <audio id="audioAcierto" src="acierto.mp3"></audio>
    <audio id="audioFallo" src="fallo.mp3"></audio>
    <audio id="audioEliminacion" src="eliminacion.mp3"></audio>
    <audio id="audioComodin" src="comodin.mp3"></audio>
    <audio id="audioExitoTotal" src="exito_total.mp3"></audio>
    <script>
        let currentQuestion = 0;
        let score = 0;
        const prizeLadder = [0, 100, 200, 300, 500, 1000, 2000, 4000, 8000, 16000, 32000, 64000, 125000, 250000, 500000, 1000000];
        const questions = [
 {
    "question": "Â¿CuÃ¡l es el continente mÃ¡s grande por superficie?",
    "answers": ["Ãfrica", "Asia", "AmÃ©rica del Norte", "Europa"],
    "correct": 1
},
{
    "question": "Â¿En quÃ© aÃ±o terminÃ³ la Segunda Guerra Mundial?",
    "answers": ["1939", "1941", "1945", "1948"],
    "correct": 2
},
{
    "question": "Â¿CuÃ¡l es la fÃ³rmula quÃmica del agua?",
    "answers": ["H2O", "CO2", "O2", "NaCl"],
    "correct": 0
},
{
    "question": "Â¿CuÃ¡l es el animal mÃ¡s grande del mundo?",
    "answers": ["Elefante", "Jirafa", "Ballena azul", "TiburÃ³n blanco"],
    "correct": 2
},
{
    "question": "Â¿QuÃ© paÃs es conocido como la 'Tierra del Sol Naciente'?",
    "answers": ["China", "JapÃ³n", "Corea del Sur", "Tailandia"],
    "correct": 1
},
{
    "question": "Â¿QuÃ© vitamina es producida por la piel en respuesta a la luz solar?",
    "answers": ["Vitamina A", "Vitamina C", "Vitamina D", "Vitamina E"],
    "correct": 2
},
{
    "question": "Â¿CuÃ¡l es el nombre del satÃ©lite natural de la Tierra?",
    "answers": ["Luna", "Marte", "Venus", "PlutÃ³n"],
    "correct": 0
},
{
    "question": "Â¿QuÃ© escritor creÃ³ el personaje de Sherlock Holmes?",
    "answers": ["Agatha Christie", "Arthur Conan Doyle", "Edgar Allan Poe", "Mark Twain"],
    "correct": 1
},
{
    "question": "Â¿CuÃ¡l es la montaÃ±a mÃ¡s alta del mundo?",
    "answers": ["Monte Everest", "K2", "Kangchenjunga", "Mont Blanc"],
    "correct": 0
},
{
    "question": "Â¿En quÃ© paÃs se originÃ³ la pizza?",
    "answers": ["Francia", "EspaÃ±a", "Grecia", "Italia"],
    "correct": 3
},
{
    "question": "Â¿QuÃ© elemento quÃmico tiene el sÃmbolo Na?",
    "answers": ["NitrÃ³geno", "Sodio", "NeÃ³n", "NÃquel"],
    "correct": 1
},
{
    "question": "Â¿QuÃ© ciudad es conocida como 'La Gran Manzana'?",
    "answers": ["Los Ãngeles", "Chicago", "Nueva York", "San Francisco"],
    "correct": 2
},
{
    "question": "Â¿QuiÃ©n es conocido como el 'Padre de la ComputaciÃ³n'?",
    "answers": ["Steve Jobs", "Alan Turing", "Bill Gates", "Charles Babbage"],
    "correct": 3
},
{
    "question": "Â¿QuÃ© planeta es conocido como el 'Planeta Rojo'?",
    "answers": ["Mercurio", "Venus", "Marte", "Saturno"],
    "correct": 2
},
{
    "question": "Â¿En quÃ© paÃs se celebran los carnavales mÃ¡s famosos del mundo?",
    "answers": ["EspaÃ±a", "Brasil", "Italia", "MÃ©xico"],
    "correct": 1
}

        ];

        function playSound(audioId) {
            const audio = document.getElementById(audioId);
            audio.play();
        }

        function zoomEffect(elementId) {
            const element = document.getElementById(elementId);
            element.style.transition = "transform 0.5s";
            element.style.transform = "scale(1.1)";
            setTimeout(() => {
                element.style.transform = "scale(1)";
            }, 500);
        }

        function loadQuestion() {
            const currentQ = questions[currentQuestion];
            document.getElementById("question").textContent = currentQ.question;
            document.getElementById("answer0").textContent = currentQ.answers[0];
            document.getElementById("answer1").textContent = currentQ.answers[1];
            document.getElementById("answer2").textContent = currentQ.answers[2];
            document.getElementById("answer3").textContent = currentQ.answers[3];
            const answersElements = document.querySelectorAll(".answer");
            answersElements.forEach(el => {
                el.classList.remove("selected", "correct", "incorrect", "disabled", "answered");
            });
        }

        function selectAnswer(index) {
            playSound('audioInicio');  // Sonido de inicio al seleccionar una respuesta
            const answersElements = document.querySelectorAll(".answer");
            answersElements.forEach(el => {
                el.classList.add("disabled");
                el.classList.add("answered");
            });
            const selectedAnswer = answersElements[index];
            selectedAnswer.classList.add("selected");
            setTimeout(() => {
                checkAnswer(index);
            }, 1000);
        }

        function checkAnswer(selectedIndex) {
            const correctIndex = questions[currentQuestion].correct;
            const answersElements = document.querySelectorAll(".answer");
            if (selectedIndex === correctIndex) {
                playSound('audioAcierto');  // Sonido de acierto
                answersElements[selectedIndex].classList.add("correct");
                score = prizeLadder[currentQuestion + 1];
                document.getElementById("score").textContent = `PuntuaciÃ³n: â‚¬${score.toLocaleString()}`;
                currentQuestion++;
                if (currentQuestion < questions.length) {
                    setTimeout(() => {
                        loadQuestion();
                        updatePrizeLadder();
                    }, 1000);
                } else {
                    playSound('audioExitoTotal');  // Sonido de Ã©xito total
                    zoomEffect('message');
                    document.getElementById("message").textContent = "Â¡Felicidades! Â¡Has ganado â‚¬1,000,000!";
                }
            } else {
                playSound('audioFallo');  // Sonido de fallo
                answersElements[selectedIndex].classList.add("incorrect");
                setTimeout(() => {
                    playSound('audioEliminacion');  // Sonido de eliminaciÃ³n
                    document.getElementById("message").textContent = `Lo siento, la respuesta correcta era "${questions[currentQuestion].answers[correctIndex]}". Gana la puntuaciÃ³n asegurada`;
                }, 1000);
            }
        }

        function updatePrizeLadder() {
            const ladderElements = document.querySelectorAll(".prize-ladder li");
            ladderElements.forEach((el, index) => {
                el.classList.remove("active");
                if (index === questions.length - currentQuestion - 1) {
                    el.classList.add("active");
                }
                if (index === 5 || index === 10) {
                    el.classList.add("safe");
                }
            });
        }

        function openModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.style.display = "block";
            setTimeout(() => {
                modal.querySelector('.modal-content').style.transform = "scale(1)";
            }, 100);
        }

        function closeModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.querySelector('.modal-content').style.transform = "scale(0.8)";
            setTimeout(() => {
                modal.style.display = "none";
            }, 500);
        }

        function useFiftyFifty() {
            playSound('audioComodin');  // Sonido de comodÃn
            openModal('fiftyFiftyModal');  // Mostrar ventana emergente
            const currentAnswers = questions[currentQuestion].answers;
            const correctIndex = questions[currentQuestion].correct;
            let indicesToHide = [];
            while (indicesToHide.length < 2) {
                const randIndex = Math.floor(Math.random() * 4);
                if (randIndex !== correctIndex && !indicesToHide.includes(randIndex)) {
                    indicesToHide.push(randIndex);
                }
            }
            const answersElements = document.querySelectorAll(".answer");
            indicesToHide.forEach(index => {
                answersElements[index].classList.add("disabled");
            });
            document.getElementById("fiftyFifty").disabled = true;
        }

        function usePhoneAFriend() {
            playSound('audioComodin');  // Sonido de comodÃn
            openModal('phoneAFriendModal');  // Mostrar ventana emergente
            document.getElementById("phoneAFriend").disabled = true;
        }

        function useAskTheAudience() {
            playSound('audioComodin');  // Sonido de comodÃn
            openModal('askTheAudienceModal');  // Mostrar ventana emergente
            const audienceResponse = questions[currentQuestion].correct;  // SimulaciÃ³n de la respuesta del pÃºblico
            document.getElementById("askTheAudience").disabled = true;
        }

        function initGame() {
            score = 0;
            document.getElementById("score").textContent = `PuntuaciÃ³n: â‚¬${score.toLocaleString()}`;
            loadQuestion();
            updatePrizeLadder();
        }

        // Inicializar el juego al cargar la pÃ¡gina
        initGame();
    </script>
</body>
</html>