Scribd Logo
Upload

Welcome to Scribd!

  • 0 views

    Evidencia

    Uploaded by

    Aderlin Troncoso Garcés
    This document contains the HTML, CSS, and JavaScript code for a basic math game. The HTML defines the page structure and elements like headings, paragraphs, inputs, and buttons. The CSS styles the page layout and elements. The JavaScript controls the functionality, like generating random math questions, checking answers, and displaying results.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Evidencia

    Uploaded by

    Aderlin Troncoso Garcés
    0 views3 pages
    This document contains the HTML, CSS, and JavaScript code for a basic math game. The HTML defines the page structure and elements like headings, paragraphs, inputs, and buttons. The CSS styles the page layout and elements. The JavaScript controls the functionality, like generating random math questions, checking answers, and displaying results.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains the HTML, CSS, and JavaScript code for a basic math game. The HTML defines the page structure and elements like headings, paragraphs, inputs, and buttons. The CSS styles the page layout and elements. The JavaScript controls the functionality, like generating random math questions, checking answers, and displaying results.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    0 views3 pages

    Evidencia

    Uploaded by

    Aderlin Troncoso Garcés
    This document contains the HTML, CSS, and JavaScript code for a basic math game. The HTML defines the page structure and elements like headings, paragraphs, inputs, and buttons. The CSS styles the page layout and elements. The JavaScript controls the functionality, like generating random math questions, checking answers, and displaying results.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 3

    HTML:

    <!DOCTYPE html>

    <html lang="es">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Juego de Matemáticas</title>

    </head>

    <body>

    <div class="container">

    <h1>Juego de Matemáticas</h1>

    <p id="question">¿Cuánto es <span id="num1"></span> + <span


    id="num2"></span>?</p>

    <input type="text" id="answer" placeholder="Ingrese su respuesta">

    <button onclick="checkAnswer()">Verificar</button>

    <p id="result"></p>

    <button onclick="generateQuestion()">Nueva Pregunta</button>

    </div>

    <script src="script.js"></script>

    </body>

    </html>

    Css:
    body {

    font-family: 'Arial', sans-serif;

    background-color: #f4f4f4;

    margin: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    height: 100vh;

    .container {

    text-align: center;

    background-color: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    button {

    padding: 10px;

    margin-top: 10px;

    cursor: pointer;

    #result {

    font-weight: bold;

    color: green;

    JS:
    document.addEventListener('DOMContentLoaded', function () {

    generateQuestion();

    });

    function generateQuestion() {

    var num1 = Math.floor(Math.random() * 10) + 1;


    var num2 = Math.floor(Math.random() * 10) + 1;

    document.getElementById('num1').innerText = num1;

    document.getElementById('num2').innerText = num2;

    document.getElementById('answer').value = '';

    document.getElementById('result').innerText = '';

    function checkAnswer() {

    var num1 = parseInt(document.getElementById('num1').innerText);

    var num2 = parseInt(document.getElementById('num2').innerText);

    var userAnswer = parseInt(document.getElementById('answer').value);

    var correctAnswer = num1 + num2;

    if (userAnswer === correctAnswer) {

    document.getElementById('result').innerText = '¡Correcto!';

    document.getElementById('result').style.color = 'green';

    } else {

    document.getElementById('result').innerText = 'Respuesta incorrecta. Inténtalo de


    nuevo.';

    document.getElementById('result').style.color = 'red';

    You might also like