<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicios de Problemas de Dinero</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- MathJax -->
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <style>
        .accordion-item {
            margin-bottom: 10px;
        }
        .accordion-button {
            background-color: #007bff;
            color: white;
        }
        .accordion-button:hover {
            background-color: #0056b3;
        }
        .accordion-button.collapsed {
            background-color: #6c757d;
        }
        .card {
            border: 1px solid rgba(0, 0, 0, 0.125);
            border-radius: 0.25rem;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Ejercicios de Problemas de Dinero</h1>
        
        <!-- Acordion para los ejercicios -->
        <div class="accordion" id="accordionExample">
            <!-- Ejercicio 1 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Problema de Dinero 1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="accordion-body">
                        <p><strong>Problema:</strong> Luis tiene \( 25 \) dólares. Compra dos libros por \( 9 \) dólares cada uno. ¿Cuánto dinero le queda?</p>
                        <p><strong>Respuesta:</strong> Le queda \( 7 \) dólares.</p>
                    </div>
                </div>
            </div>

            <!-- Ejercicio 2 -->
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Problema de Dinero 2
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="accordion-body">
                        <p><strong>Problema:</strong> Marta tenía \( 40 \) dólares. Gastó la mitad en ropa y luego gastó \( 12 \) dólares más. ¿Cuánto dinero le queda?</p>
                        <p><strong>Respuesta:</strong> Le queda \( 8 \) dólares.</p>
                    </div>
                </div>
            </div>

            <!-- Continuar con los demás ejercicios, replicando la estructura para cada uno -->

        </div>
    </div>

    <!-- Bootstrap JS y Popper.js -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
