Calculator Tools Calculator Tools
Create

Juego de Ingredientes Veganos

Jan 10, 2024

About this app

Descubre qué ingredientes veganos aportan diferentes nutrientes al cuerpo humano

Juego de Ingredientes Veganos Juego de Ingredientes Veganos Resultados Tu puntaje final es /.

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Juego de Ingredientes Veganos</title>
<meta name="description" content="Descubre qué ingredientes veganos aportan diferentes nutrientes al cuerpo humano">
<meta name="keywords" content="vegano, ingredientes, nutrientes, juego, quiz">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
$(document).ready(function() {
const questions = [
{
question: "¿Qué ingrediente vegano es rico en calcio?",
options: ["Tofu", "Leche de vaca", "Queso cheddar", "Pollo"],
answer: "Tofu"
},
{
question: "¿Cuál de los siguientes ingredientes veganos es una buena fuente de proteína?",
options: ["Lentejas", "Carne de res", "Huevos", "Atún"],
answer: "Lentejas"
},
{
question: "¿Qué ingrediente vegano es una fuente de vitamina C?",
options: ["Naranjas", "Yogur", "Salmón", "Pechugas de pollo"],
answer: "Naranjas"
},
{
question: "¿Cuál de los siguientes ingredientes veganos es rico en hierro?",
options: ["Espinacas", "Leche de cabra", "Jamón", "Pescado"],
answer: "Espinacas"
},
{
question: "¿Qué ingrediente vegano es una buena fuente de vitamina B12?",
options: ["Levadura nutricional", "Leche de oveja", "Tocino", "Carne de cerdo"],
answer: "Levadura nutricional"
}
];

let currentQuestion = 0;
let score = 0;

function displayQuestion() {
const question = questions[currentQuestion];

$("#question").text(question.question);
$("#option1").text(question.options[0]);
$("#option2").text(question.options[1]);
$("#option3").text(question.options[2]);
$("#option4").text(question.options[3]);
}

function checkAnswer(selectedOption) {
const question = questions[currentQuestion];

if (selectedOption === question.answer) {
score++;
}

currentQuestion++;

if (currentQuestion < questions.length) {
displayQuestion();
} else {
displayResult();
}
}

function displayResult() {
$("#quiz-container").hide();
$("#result-container").show();

$("#score").text(score);
$("#total-questions").text(questions.length);
}

$(".option").click(function() {
const selectedOption = $(this).text();
checkAnswer(selectedOption);
});

displayQuestion();
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
body {
background-color: #f8f9fa;
font-family: 'Roboto', sans-serif;
}

.container {
max-width: 500px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}

h1 {
color: #6c757d;
font-size: 24px;
margin-bottom: 30px;
}

p {
color: #6c757d;
font-size: 18px;
margin-bottom: 20px;
}

.options-container {
margin-top: 40px;
}

.option {
display: block;
background-color: #ffffff;
border: 2px solid #6c757d;
color: #6c757d;
font-size: 16px;
padding: 10px 20px;
margin-bottom: 10px;
cursor: pointer;
}

.option:hover {
background-color: #6c757d;
color: #ffffff;
}

#result-container {
display: none;
margin-top: 40px;
}

#result-container p {
margin-bottom: 10px;
}

#result-container h2 {
color: #6c757d;
font-size: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Juego de Ingredientes Veganos</h1>

<div id="quiz-container">
<p id="question"></p>

<div class="options-container">
<div class="option" id="option1"></div>
<div class="option" id="option2"></div>
<div class="option" id="option3"></div>
<div class="option" id="option4"></div>
</div>
</div>

<div id="result-container">
<h2>Resultados</h2>
<p>Tu puntaje final es <span id="score"></span>/<span id="total-questions"></span>.</p>
</div>
</div>
</body>
</html>