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>El Reto - Saber y Ganar</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #e0eafc, #cfdef3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            color: #333;
            text-align: center;
        }

        #start-screen, #game-container, #solution-screen {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        #start-screen {
            display: flex;
        }

        button {
            padding: 15px 30px;
            border-radius: 5px;
            background: linear-gradient(to right, #00c6ff, #0072ff);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
            margin: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease;
        }

        button:hover {
            background: linear-gradient(to right, #0072ff, #00c6ff);
        }

        #word-list {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
        }

        .word-initials {
            font-size: 2em;
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 20px;
            background: linear-gradient(to right, #6dd5ed, #2193b0);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            margin-bottom: 10px;
        }

        .word-initials.correct {
            visibility: hidden;
        }

        #scoreboard {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            max-width: 600px;
            padding: 15px;
            border-radius: 15px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
        }

        .score {
            margin: 0 20px;
            font-size: 1.5em;
        }

        #time {
            font-size: 1.5em;
        }

        #definition {
            margin: 20px;
            font-size: 1.8em;
            font-weight: bold;
            max-width: 80%;
            padding: 15px;
            border-radius: 10px;
            background: linear-gradient(to right, #fbc2eb, #a18cd1);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        #answer-input {
            padding: 10px;
            font-size: 1.2em;
            border-radius: 5px;
            border: none;
            text-align: center;
            width: 80%;
            max-width: 300px;
            margin-bottom: 20px;
        }

        #action-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 10px;
        }

        #feedback {
            font-size: 2em;
            font-weight: bold;
            margin-top: 20px;
            opacity: 0;
            transition: opacity 0.5s ease, color 0.5s ease;
        }

        #feedback.correct {
            color: #28a745;
            opacity: 1;
        }

        #feedback.incorrect {
            color: #dc3545;
            opacity: 1;
        }

        #solution-modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }

        #solution-content {
            position: relative;
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 600px;
            text-align: left;
            color: black;
            transform: scale(0);
            transition: transform 0.3s ease-in-out;
        }

        #solution-content h2 {
            margin-top: 0;
        }

        #solution-content ul {
            list-style: none;
            padding: 0;
        }

        #solution-content ul li {
            margin-bottom: 10px;
        }

        #close-solution {
            display: block;
            margin: 0 auto;
            padding: 10px 20px;
            border-radius: 5px;
            background: linear-gradient(to right, #ff5f6d, #ffc371);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.2em;
            margin-top: 20px;
            transition: background 0.3s ease;
        }

        #close-solution:hover {
            background: linear-gradient(to right, #ffc371, #ff5f6d);
        }

        #solution-button {
            padding: 15px 30px;
            border-radius: 5px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.3em;
            margin: 0px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease;
            display: none;
        }

#submit-button, #pass-button, #answer-input {
    display: inline-block;
}

        #solution-button:hover {
            background: linear-gradient(to right, #feb47b, #ff7e5f);
        }
    </style>
</head>
<body style="overflow: hidden">

<audio id="audioInicio" src="inicio.mp3"></audio>
<audio id="audioAcierto" src="acierto.mp3"></audio>
<audio id="audioFallo" src="fallo.mp3"></audio>
<audio id="sonidoPasar" src="pasapalabra.mp3" preload="auto"></audio>
<audio id="audiosoluciones" src="continuar.mp3"></audio>
<audio id="audioTiempo" src="tiempo.mp3"></audio>
<audio id="audioExitoTotal" src="exito_total.mp3"></audio>

<div id="start-screen">
    <h1>El Reto</h1>
    <button id="start-button">Comenzar</button>
</div>

<div id="game-container">
    <div id="scoreboard">
        <div class="score" id="correct-score">Aciertos: 0</div>
        <div class="score" id="incorrect-score">Fallos: 0</div>
        <div id="time">Tiempo: 70s</div>
    </div>

    <div id="word-list"></div>

    <div id="definition">DefiniciÃ³n: </div>

    <input type="text" id="answer-input" placeholder="Escribe tu respuesta aquÃ">

    <div id="action-buttons">
        <button id="submit-button">Responder</button>
        <button id="pass-button">Pasar</button>
    </div>

    <div id="feedback"></div>
</div>

<button id="solution-button">SoluciÃ³n</button>

<div id="solution-modal">
    <div id="solution-content">
        <h2>Soluciones</h2>
        <ul id="solution-list"></ul>
        <button id="close-solution">Cerrar</button>
    </div>
</div>

<script>
    const words = [
{
    "initials": "AVE",
    "word": "AVESTRUZ",
    "definition": "Ave grande no voladora originaria de Ãfrica."
},
{
    "initials": "FLO",
    "word": "FLOR",
    "definition": "Ã“rgano reproductor de las plantas, generalmente colorido."
},
{
    "initials": "CAM",
    "word": "CAMINO",
    "definition": "VÃa o ruta por la que se transita para llegar a un lugar."
},
{
    "initials": "CAS",
    "word": "CASTILLO",
    "definition": "EdificaciÃ³n fortificada usada en la antigÃ¼edad para defensa."
},
{
    "initials": "ARB",
    "word": "ARBOL",
    "definition": "Planta perenne de tronco leÃ±oso que se ramifica a cierta altura del suelo."
},
{
    "initials": "MEL",
    "word": "MELÃ“N",
    "definition": "Fruta grande y dulce con pulpa jugosa, generalmente de color anaranjado o verde."
},
{
    "initials": "TOR",
    "word": "TORRE",
    "definition": "Estructura alta y esbelta que puede formar parte de un edificio o estar aislada."
}

    ];

    let correctCount = 0;
    let incorrectCount = 0;
    let currentDefinitionIndex = 0;
    let remainingWords = [...words];
    let passedWords = [];
    let timer;

    const startButton = document.getElementById('start-button');
    const gameContainer = document.getElementById('game-container');
    const startScreen = document.getElementById('start-screen');
    const definitionElement = document.getElementById('definition');
    const answerInput = document.getElementById('answer-input');
    const submitButton = document.getElementById('submit-button');
    const passButton = document.getElementById('pass-button');
    const correctScoreElement = document.getElementById('correct-score');
    const incorrectScoreElement = document.getElementById('incorrect-score');
    const feedbackElement = document.getElementById('feedback');
    const wordListElement = document.getElementById('word-list');
    const timeElement = document.getElementById('time');
    const solutionButton = document.getElementById('solution-button');
    const solutionModal = document.getElementById('solution-modal');
    const solutionList = document.getElementById('solution-list');
    const closeSolutionButton = document.getElementById('close-solution');

    const audioInicio = document.getElementById('audioInicio');
    const audioAcierto = document.getElementById('audioAcierto');
    const audioFallo = document.getElementById('audioFallo');
    const sonidoPasar = document.getElementById('sonidoPasar');
    const audioTiempo = document.getElementById('audioTiempo');
    const audioExitoTotal = document.getElementById('audioExitoTotal');

    startButton.addEventListener('click', startGame);
    submitButton.addEventListener('click', checkAnswer);
    passButton.addEventListener('click', passWord);
    solutionButton.addEventListener('click', showSolutions);
    closeSolutionButton.addEventListener('click', closeSolutionModal);

    function startGame() {
        startScreen.style.display = 'none';
        gameContainer.style.display = 'flex';
        audioInicio.play();
        shuffleWords();
        displayCurrentDefinition();
        displayWordInitials();
        startTimer(70);
    }

    function shuffleWords() {
        remainingWords = [...words];
        remainingWords.sort(() => Math.random() - 0.5);
    }

    function displayCurrentDefinition() {
        if (remainingWords.length > 0) {
            const currentWord = remainingWords[currentDefinitionIndex];
            definitionElement.textContent = `DefiniciÃ³n: ${currentWord.definition}`;
        } else if (passedWords.length > 0) {
            remainingWords = [...passedWords];
            passedWords = [];
            currentDefinitionIndex = 0;
            displayCurrentDefinition();
        } else {
            endGame();
        }
    }

    function displayWordInitials() {
        wordListElement.innerHTML = '';
        words.forEach(word => {
            const wordElement = document.createElement('div');
            wordElement.textContent = word.initials;
            wordElement.className = 'word-initials';
            wordListElement.appendChild(wordElement);
        });
    }

    function checkAnswer() {
        const userAnswer = answerInput.value.trim().toUpperCase();
        const currentWord = remainingWords[currentDefinitionIndex];

        if (userAnswer === currentWord.word.toUpperCase()) {
            correctCount++;
            correctScoreElement.textContent = `Aciertos: ${correctCount}`;
            feedbackElement.textContent = 'Â¡Correcto!';
            feedbackElement.className = 'correct';
            audioAcierto.play();
            remainingWords.splice(currentDefinitionIndex, 1);
            document.querySelectorAll('.word-initials')[words.indexOf(currentWord)].classList.add('correct');
        } else {
            incorrectCount++;
            incorrectScoreElement.textContent = `Fallos: ${incorrectCount}`;
            feedbackElement.textContent = 'Incorrecto';
            feedbackElement.className = 'incorrect';
            audioFallo.play();
        }

        answerInput.value = '';
        setTimeout(() => {
            feedbackElement.className = '';
            displayCurrentDefinition();
        }, 1000);
    }

    function passWord() {
        const currentWord = remainingWords[currentDefinitionIndex];
        passedWords.push(currentWord);
        remainingWords.splice(currentDefinitionIndex, 1);
        sonidoPasar.play();
        displayCurrentDefinition();
    }

    function showSolutions() {
        solutionModal.style.display = 'block';
        document.getElementById('solution-content').style.transform = 'scale(1)';
        solutionList.innerHTML = '';
        words.forEach(word => {
            const listItem = document.createElement('li');
            listItem.textContent = `${word.initials}: ${word.definition} - Respuesta: ${word.word}`;
            solutionList.appendChild(listItem);
        });
        audioExitoTotal.play();
    }

    function closeSolutionModal() {
        document.getElementById('solution-content').style.transform = 'scale(0)';
        setTimeout(() => {
            solutionModal.style.display = 'none';
        }, 300);
    }

    function startTimer(duration) {
        let time = duration;
        timer = setInterval(() => {
            time--;
            timeElement.textContent = `Tiempo: ${time}s`;

            if (time <= 0) {
                clearInterval(timer);
                endGame();
            }
        }, 1000);
    }

function endGame() {
    clearInterval(timer);
    audioTiempo.play();

    // Ocultar los controles de respuesta, pasar y el cuadro de texto
    submitButton.style.display = 'none';
    passButton.style.display = 'none';
    answerInput.style.display = 'none';

    // Mostrar el botÃ³n de soluciÃ³n
    solutionButton.style.display = 'block';

    // Mostrar el mensaje en la zona de definiciones
    if (correctCount === 7) {
        definitionElement.textContent = "Â¡Reto superado!";
    } else {
        definitionElement.textContent = "Reto no superado";
    }
}
</script>
</body>
</html>