Reutilizar
Batalla Individual
Descripción
Diseño
Desarrollo
El juego está creado para realizar las "Batallas Individuales" dentro de la gamificación "Mathmental Royale: Multiplicaciones" en el que trabajaremos las tablas de multiplicar. En las batallas Individuales, el jugador debe completar una serie de puntos para poder derrotar a la torre del Rey. Una vez derrotado, el maestro/a le entregará la clave para pasar a la siguiente arena (siguiente tabla de multiplicar).
Extensiones
Créditos
Todas las imágenes utilizadas están registradas bajo licencia de uso de Freepik
- Quiz Flexible
- Typewriter + VAR + Gradebook
Las imágenes del juego Clash Royale pertencen a Supercell
Nota. Este Quiz Flexible está modificado para que la puntuación sea el número de aciertos multiplicado por 10 para adaptarlo a la gamificación Mathmental Royale. Para utilizar el Quiz Flexible original debes ir al enlace que hay arriba.
Una épica batalla está a punto de comenzar.
- 12
https://view.genial.ly/65a2c87754a170001489af93
Desmuestra tu habilidad con las tablas de multiplicar.
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Sube de nivel y avanza por las diferentes arenas y ...
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
¡conviertete en el Rey de las Multiplicaciones!
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
nom,group
Elige tu campeón de batalla
Escribe tu nombre
§nom§: *3
- 12
$3
§nom§
§nom§
Arena 3
Arena 5
Arena 4
Arena 2
Arena 1
Arena 8
Arena 6
Arena 10
Arena 7
Arena 9
30
Tabla del 2
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
Quiz,5, T:Q1
- &100 $v1[1,9] x 2
- eval{$v1* 2}
true
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
- ¡BUENA SUERTE!
- ¡No, no! | Ups!|Ni de broma | ¿En serio?
- ¡MUY BIEN! | ¡GENIAL! ESTUPENDO | Por los pelos
- ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 3
$3
02:03
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 3
- eval{$v1* 3}
Quiz,5, T:Q2
Algo salió mal
$2
¡ Genial $J1:"§nom§" !
$1
PER
$TXT QUIZ$ Texto del enunciado
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 4
$3
01:00
00:30
00:15
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 4
- eval{$v1* 4}
Quiz,5, T:Q3
¡ Genial !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 5
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 5
- eval{$v1* 5}
Quiz,5, T:Q4
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Tabla del 6
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 6
- eval{$v1* 6}
Quiz,5, T:Q5
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Tabla del 7
- &100 $v1[11,99] + $v2[1,9]
- eval{$v1+$v2}
- &100 $v3[1,9] + $v4[11,99]
- eval{$v3+$v4}
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 7
- eval{$v1* 7}
Quiz,5, T:Q6
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
PER
$TXT QUIZ$ Texto del enunciado
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Tabla del 8
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 8
- eval{$v1* 8}
Quiz,5, T:Q7
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
PER
$TXT QUIZ$ Texto del enunciado
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Tabla del 9
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 9
- eval{$v1* 9}
Quiz,5, T:Q8
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Tabla del 10
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x 10
- eval{$v1* 10}
Quiz,5, T:Q9
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Todas las tablas
- &100 $v1[111,999] + $v2[10/20/30/40/50/60/70/80/90]
- eval{$v1+$v2}
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
- &100 $v1[1,9] x $v2[1,9]
- eval{$v1* $v2}
Quiz,5, T:Q10
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
INPUTCREATOR
AbeeZee
Alto
Abel
Ancho
Abhaya Libre
Se mettre en mode prévisualisation pour changer les paramètres
AbeeZee
Taille bordure
Aclonica
AbeeZee
Opacité fond
Actor
Aperçu boîte personnalisée
Style bordure
Couleur bordure
Couleur fond
Couleur police
Taille police
Petit rappel, il faudra que la police soit présente sur la page ou vous mettrez vos boîtes pour qu'elle soit prise en compte
Nom police
Nom variable
Texte à copier puis entrer dans "insérer , </> Autres" sous genially pour obtenir des boîtes compatibles avec l'extension présentant votre aspect personnalisé
Reemplaza el texto en negrita por el código de tu barra. Luego, copia todo el texto e insértalo en tu itinerario
<div class="css-progressBarGen" style="width: 100%; height: 100%; padding: 0px; border-color: rgb(140, 140, 140); border-width: 1px; border-style: solid; background-color: rgb(245, 245, 245); border-radius: 100px; backdrop-filter: blur(0px); transform: scaleY(1); overflow: hidden;"><div style="height: 100%; width: 80%; padding: 0px; margin: 0px; border-width: 0px; border-radius: 100px; backdrop-filter: blur(0px); box-shadow: rgba(102, 102, 102, 0.3) 4.1px 1.00421e-15px 14.9px 4.1px; background-image: linear-gradient(0deg, rgb(252, 200, 70) 0%, rgb(252, 200, 70) 71%);" data-ref="progressBar" orientation="horizontal" data-value="0"></div></div> <script> if (document.querySelector('.container-wrapper-genially')) { var progress = document.querySelectorAll("div[data-ref=progressBar]"); for (var i = 0; i < progress.length && !progress[i].getAttribute('data-init'); i++) { var url = window.location.pathname.split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { var referencia = url[y]; found = true; } } var textosAdjuntos = progress[i].closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) {} else if (texto.innerText.trim().substring(0, 3) == 'htt') { url = texto.innerText.trim().split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { referencia = url[y]; found = true; } } texto.style.display = 'none' } } var claveCadena = localStorage.getItem('claveGenerada' + referencia); actualizaBarra(claveCadena, progress[i]); progress[i].setAttribute('data-init', true); } } function actualizaBarra(claveCadena, barra) { var progress = barra; let grupo = progress.closest('div.genially-animated-wrapper'); var txtBarra = getTexte(progress); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = 0 + "%"; progress.setAttribute('data-value', 0); } else { progress.style.width = 0 + "%"; progress.setAttribute('data-value', 0); } if (txtBarra) { txtBarra.innerText = 0 + "%" }; if (claveCadena) { var found = (claveCadena.match(/true/gi) ? claveCadena.match(/true/gi).length : 0), notFound = (claveCadena.match(/false/gi) ? claveCadena.match(/false/gi).length : 0); var avance = Math.max(((found - 1)/(notFound + found) * 100), 0); var value = parseInt(progress.getAttribute('data-value')); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = avance + "%"; progress.setAttribute('data-value', avance); } else { progress.style.width = avance + "%"; progress.setAttribute('data-value', avance); } console.log("actualizando la barra con digito"); let idInterval = setInterval(function () { value = parseInt(progress.getAttribute('data-value')); var range; if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else { range = 80; } if (value >= (found/(notFound + found) * 100) - 1) { clearInterval(idInterval); value = (found/(notFound + found) * 100); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%" }; } else { value++; if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%"; } } }, 100); } } function getTexte(progress) { var textosAdjuntos = progress.closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) { var lastElementChild = texto; while (lastElementChild.firstChild) { lastElementChild = lastElementChild.firstChild; } return lastElementChild.parentNode; } } } </script>
<style>
.progressCh {
padding: 4px;
background: rgba(0, 0, 0, 0.25);
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-barCh {
height: 16px;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
/*
* Note: using adjacent or general sibling selectors combined with
* pseudo classes doesn't work in Safari 5.0 and Chrome 12.
* See this article for more info and a potential fix:
* https://css-tricks.com/webkit-sibling-bug/
*/
.progressCh > .progress-barCh[data-range="0"] {
background-color: #f63a0f;
}
.progressCh > .progress-barCh[data-range="20"] {
background-color: #f27011;
}
.progressCh > .progress-barCh[data-range="40"] {
background-color: #f2b01e;
}
.progressCh > .progress-barCh[data-range="60"] {
background-color: #f2d31b;
}
.progressCh > .progress-barCh[data-range="80"] {
background-color: #86e01e;
}
.progressCh > .progress-barCh[data-range="100"] {
-webkit-animation: gradientAnimation 5s alternate infinite linear;
-moz-animation: gradientAnimation 5s alternate infinite linear;
animation: gradientAnimation 5s alternate infinite linear;
}
@-webkit-keyframes gradientAnimation {
0%{background-color: #86e01e;}
20%{background-color: #86e01e;}
40%{background-color: #f2d31b;}
60%{background-color: #f2b01e;}
80%{background-color: #f27011;}
100%{background-color: #f63a0f;}
}
@-moz-keyframes gradientAnimation {
0%{background-color: #86e01e;}
20%{background-color: #86e01e;}
40%{background-color: #f2d31b;}
60%{background-color: #f2b01e;}
80%{background-color: #f27011;}
100%{background-color: #f63a0f;}
}
@keyframes gradientAnimation {
0%{background-color: #86e01e;}
20%{background-color: #86e01e;}
40%{background-color: #f2d31b;}
60%{background-color: #f2b01e;}
80%{background-color: #f27011;}
100%{background-color: #f63a0f;}
}
</style>
<div class="progressCh" style="width: 100%; height: 100%; padding: 0px; border-color: rgb(0, 0, 0); border-width: 1px; border-style: solid; background-color: rgba(245, 245, 245, 0.74); border-radius: 5px; backdrop-filter: blur(0.3px); transform: scaleY(1); overflow: hidden;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);"><div style="height: 0%; width: 0%; padding: 0px; margin: 0px; border-width: 0px; border-radius: 5px; backdrop-filter: blur(0.3px); box-shadow: rgba(102, 102, 102, 0.79) -1.10218e-15px 6px 8.3px 6px;" data-ref="progressBar" class="progress-barCh" orientation="vertical" data-value="0" data-range="0">
</div></div>
<script>
if (document.querySelector('.container-wrapper-genially')) {
var progress = document.querySelectorAll("div[data-ref=progressBar]");
for (var i = 0; i < progress.length && !progress[i].getAttribute('data-init'); i++) {
if (progress[i].getAttribute('orientation') == 'vertical') {
progress[i].style.height = 0 + "%";
progress[i].style['-webkit-transition-property'] = "background-color, height";
progress[i].style['-moz-transition-property'] = "background-color, height";
progress[i].style['-o-transition-property'] = "background-color, height";
progress[i].style['transition-property'] = "background-color, height";
progress[i].parentNode.style.webkitTransform = 'rotateX('+180+'deg)';
progress[i].parentNode.style.mozTransform = 'rotateX('+180+'deg)';
progress[i].parentNode.style.msTransform = 'rotateX('+180+'deg)';
progress[i].parentNode.style.oTransform = 'rotateX('+180+'deg)';
progress[i].parentNode.style.transform = 'rotateX('+180+'deg)';
progress[i].style.webkitTransform = 'rotateX('+180+'deg)';
progress[i].style.mozTransform = 'rotateX('+180+'deg)';
progress[i].style.msTransform = 'rotateX('+180+'deg)';
progress[i].style.oTransform = 'rotateX('+180+'deg)';
progress[i].style.transform = 'rotateX('+180+'deg)';
progress[i].style.width = 100 + "%";
} else {
progress[i].style.height = 100 + "%";
}
var url = window.location.pathname.split("/");
var found = false;
var conNumero = /\d/;
for (var y = 0; y < url.length && !found; y++) {
if (conNumero.test(url[y])) {
var referencia = url[y];
found = true;
}
}
var textosAdjuntos = progress[i].closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text');
for (var k = 0; k < textosAdjuntos.length; k++) {
var texto = textosAdjuntos[k];
var porcentaje = /^[0-9]+\%$/;
if (porcentaje.test(texto.innerText.trim())) {}
else if (texto.innerText.trim().substring(0, 3) == 'htt') {
url = texto.innerText.trim().split("/");
var found = false;
var conNumero = /\d/;
for (var y = 0; y
< url.length && !found; y++) {
if (conNumero.test(url[y])) {
referencia = url[y];
found = true;
}
}
texto.style.display = 'none'
}
}
var claveCadena = localStorage.getItem('claveGenerada' + referencia);
actualizaBarra(claveCadena, progress[i]);
progress[i].setAttribute('data-init', true);
}
}
function actualizaBarra(claveCadena, barra) {
var progress = barra;
let grupo = progress.closest('div.genially-animated-wrapper');
var txtBarra = getTexte(progress);
if (progress.getAttribute('orientation') == 'vertical') {
progress.style.height = 0 + "%";
progress.setAttribute('data-value', 0);
} else {
progress.style.width = 0 + "%";
progress.setAttribute('data-value', 0);
}
if (txtBarra) {
txtBarra.innerText = 0 + "%"
};
if (claveCadena) {
var found = (claveCadena.match(/true/gi) ? claveCadena.match(/true/gi).length : 0),
notFound = (claveCadena.match(/false/gi) ? claveCadena.match(/false/gi).length : 0);
var avance = Math.max(((found - 1)/(notFound + found) * 100), 0);
var value = parseInt(progress.getAttribute('data-value'));
if (progress.getAttribute('orientation') == 'vertical') {
progress.style.height = avance + "%";
progress.setAttribute('data-value', avance);
} else {
progress.style.width = avance + "%";
progress.setAttribute('data-value', avance);
}
console.log("actualizando la barra con digito");
let idInterval = setInterval(function () {
value = parseInt(progress.getAttribute('data-value'));
var range;
if (value >= (found/(notFound + found) * 100) - 1) {
clearInterval(idInterval);
value = (found/(notFound + found) * 100);
if (progress.getAttribute('orientation') == 'vertical') {
progress.style.height = value + "%";
progress.setAttribute('data-value', value);
} else {
progress.style.width = value + "%";
progress.setAttribute('data-value', value);
}
if(value < 20){
range = 0;
} else if (value < 40){
range = 20;
} else if (value < 60){
range = 40;
} else if (value < 80){
range = 60;
} else if (value < 100){
range = 80;
} else if (value == 100){
range = 100;
}
progress.setAttribute('data-range', range);
if (txtBarra) {
txtBarra.innerText = Math.ceil(parseFloat(value)) + "%"
};
} else {
value++;
if (progress.getAttribute('orientation') == 'vertical') {
progress.style.height = value + "%";
progress.setAttribute('data-value', value);
} else {
progress.style.width = value + "%";
progress.setAttribute('data-value', value);
}
if(value < 20){
range = 0;
} else if (value < 40){
range = 20;
} else if (value < 60){
range = 40;
} else if (value < 80){
range = 60;
} else if (value < 100){
range = 80;
} else if (value == 100){
range = 100;
}
progress.setAttribute('data-range', range);
if (txtBarra) {
txtBarra.innerText = Math.ceil(parseFloat(value)) + "%";
}
}
}, 100);
}
}
function getTexte(progress) {
var textosAdjuntos = progress.closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text');
for (var k = 0; k < textosAdjuntos.length; k++) {
var texto = textosAdjuntos[k];
var porcentaje = /^[0-9]+\%$/;
if (porcentaje.test(texto.innerText.trim())) {
var lastElementChild = texto;
while (lastElementChild.firstChild) {
lastElementChild = lastElementChild.firstChild;
}
return lastElementChild.parentNode;
}
}
}
</script>
Barras de progreso que cambian de color
Reemplaza el texto en negrita por los colores que quieras. También opta por horizontal o vertical. Luego, copia todo el texto e insértalo en tu itinerario
Cambia de color según %
80%
80%
Mathmental Royale. Batalla Individual. CLASE
Tizas Digitales
Created on January 13, 2024
Juego para trabajar las tablas de multiplicar. Está dentro de la gamificación Mathmental Royale
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Fill in Blanks
View
Countdown
View
Stopwatch
View
Unpixelator
View
Break the Piñata
View
Bingo
View
Create a Secret Code
Explore all templates
Transcript
Reutilizar
Batalla Individual
Descripción
Diseño
Desarrollo
El juego está creado para realizar las "Batallas Individuales" dentro de la gamificación "Mathmental Royale: Multiplicaciones" en el que trabajaremos las tablas de multiplicar. En las batallas Individuales, el jugador debe completar una serie de puntos para poder derrotar a la torre del Rey. Una vez derrotado, el maestro/a le entregará la clave para pasar a la siguiente arena (siguiente tabla de multiplicar).
Extensiones
Créditos
Todas las imágenes utilizadas están registradas bajo licencia de uso de Freepik
Las imágenes del juego Clash Royale pertencen a Supercell
Nota. Este Quiz Flexible está modificado para que la puntuación sea el número de aciertos multiplicado por 10 para adaptarlo a la gamificación Mathmental Royale. Para utilizar el Quiz Flexible original debes ir al enlace que hay arriba.
Una épica batalla está a punto de comenzar.
https://view.genial.ly/65a2c87754a170001489af93
Desmuestra tu habilidad con las tablas de multiplicar.
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Sube de nivel y avanza por las diferentes arenas y ...
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
¡conviertete en el Rey de las Multiplicaciones!
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
nom,group
Elige tu campeón de batalla
Escribe tu nombre
§nom§: *3
$3
§nom§
§nom§
Arena 3
Arena 5
Arena 4
Arena 2
Arena 1
Arena 8
Arena 6
Arena 10
Arena 7
Arena 9
30
Tabla del 2
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
Quiz,5, T:Q1
true
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 3
$3
02:03
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q2
Algo salió mal
$2
¡ Genial $J1:"§nom§" !
$1
PER
$TXT QUIZ$ Texto del enunciado
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 4
$3
01:00
00:30
00:15
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q3
¡ Genial !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 5
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q4
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 6
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q5
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 7
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q6
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
PER
$TXT QUIZ$ Texto del enunciado
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 8
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q7
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
PER
$TXT QUIZ$ Texto del enunciado
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 9
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q8
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
Tabla del 10
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q9
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
Todas las tablas
$3
02:00
$HITS1
$J1:"§nom§"
$J1:"§nom§"
$SCORE1
true
Quiz,5, T:Q10
¡ Genial $J1:"§nom§" !
$1
Algo salió mal
$2
$TXT QUIZ$ Texto del enunciado
PER
Volver
Reinicia
$TXT FEEDBACK$
INPUTCREATOR
AbeeZee
Alto
Abel
Ancho
Abhaya Libre
Se mettre en mode prévisualisation pour changer les paramètres
AbeeZee
Taille bordure
Aclonica
AbeeZee
Opacité fond
Actor
Aperçu boîte personnalisée
Style bordure
Couleur bordure
Couleur fond
Couleur police
Taille police
Petit rappel, il faudra que la police soit présente sur la page ou vous mettrez vos boîtes pour qu'elle soit prise en compte
Nom police
Nom variable
Texte à copier puis entrer dans "insérer , </> Autres" sous genially pour obtenir des boîtes compatibles avec l'extension présentant votre aspect personnalisé
Reemplaza el texto en negrita por el código de tu barra. Luego, copia todo el texto e insértalo en tu itinerario
<div class="css-progressBarGen" style="width: 100%; height: 100%; padding: 0px; border-color: rgb(140, 140, 140); border-width: 1px; border-style: solid; background-color: rgb(245, 245, 245); border-radius: 100px; backdrop-filter: blur(0px); transform: scaleY(1); overflow: hidden;"><div style="height: 100%; width: 80%; padding: 0px; margin: 0px; border-width: 0px; border-radius: 100px; backdrop-filter: blur(0px); box-shadow: rgba(102, 102, 102, 0.3) 4.1px 1.00421e-15px 14.9px 4.1px; background-image: linear-gradient(0deg, rgb(252, 200, 70) 0%, rgb(252, 200, 70) 71%);" data-ref="progressBar" orientation="horizontal" data-value="0"></div></div> <script> if (document.querySelector('.container-wrapper-genially')) { var progress = document.querySelectorAll("div[data-ref=progressBar]"); for (var i = 0; i < progress.length && !progress[i].getAttribute('data-init'); i++) { var url = window.location.pathname.split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { var referencia = url[y]; found = true; } } var textosAdjuntos = progress[i].closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) {} else if (texto.innerText.trim().substring(0, 3) == 'htt') { url = texto.innerText.trim().split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { referencia = url[y]; found = true; } } texto.style.display = 'none' } } var claveCadena = localStorage.getItem('claveGenerada' + referencia); actualizaBarra(claveCadena, progress[i]); progress[i].setAttribute('data-init', true); } } function actualizaBarra(claveCadena, barra) { var progress = barra; let grupo = progress.closest('div.genially-animated-wrapper'); var txtBarra = getTexte(progress); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = 0 + "%"; progress.setAttribute('data-value', 0); } else { progress.style.width = 0 + "%"; progress.setAttribute('data-value', 0); } if (txtBarra) { txtBarra.innerText = 0 + "%" }; if (claveCadena) { var found = (claveCadena.match(/true/gi) ? claveCadena.match(/true/gi).length : 0), notFound = (claveCadena.match(/false/gi) ? claveCadena.match(/false/gi).length : 0); var avance = Math.max(((found - 1)/(notFound + found) * 100), 0); var value = parseInt(progress.getAttribute('data-value')); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = avance + "%"; progress.setAttribute('data-value', avance); } else { progress.style.width = avance + "%"; progress.setAttribute('data-value', avance); } console.log("actualizando la barra con digito"); let idInterval = setInterval(function () { value = parseInt(progress.getAttribute('data-value')); var range; if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else { range = 80; } if (value >= (found/(notFound + found) * 100) - 1) { clearInterval(idInterval); value = (found/(notFound + found) * 100); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%" }; } else { value++; if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%"; } } }, 100); } } function getTexte(progress) { var textosAdjuntos = progress.closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) { var lastElementChild = texto; while (lastElementChild.firstChild) { lastElementChild = lastElementChild.firstChild; } return lastElementChild.parentNode; } } } </script>
<style> .progressCh { padding: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); } .progress-barCh { height: 16px; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); } /* * Note: using adjacent or general sibling selectors combined with * pseudo classes doesn't work in Safari 5.0 and Chrome 12. * See this article for more info and a potential fix: * https://css-tricks.com/webkit-sibling-bug/ */ .progressCh > .progress-barCh[data-range="0"] { background-color: #f63a0f; } .progressCh > .progress-barCh[data-range="20"] { background-color: #f27011; } .progressCh > .progress-barCh[data-range="40"] { background-color: #f2b01e; } .progressCh > .progress-barCh[data-range="60"] { background-color: #f2d31b; } .progressCh > .progress-barCh[data-range="80"] { background-color: #86e01e; } .progressCh > .progress-barCh[data-range="100"] { -webkit-animation: gradientAnimation 5s alternate infinite linear; -moz-animation: gradientAnimation 5s alternate infinite linear; animation: gradientAnimation 5s alternate infinite linear; } @-webkit-keyframes gradientAnimation { 0%{background-color: #86e01e;} 20%{background-color: #86e01e;} 40%{background-color: #f2d31b;} 60%{background-color: #f2b01e;} 80%{background-color: #f27011;} 100%{background-color: #f63a0f;} } @-moz-keyframes gradientAnimation { 0%{background-color: #86e01e;} 20%{background-color: #86e01e;} 40%{background-color: #f2d31b;} 60%{background-color: #f2b01e;} 80%{background-color: #f27011;} 100%{background-color: #f63a0f;} } @keyframes gradientAnimation { 0%{background-color: #86e01e;} 20%{background-color: #86e01e;} 40%{background-color: #f2d31b;} 60%{background-color: #f2b01e;} 80%{background-color: #f27011;} 100%{background-color: #f63a0f;} } </style> <div class="progressCh" style="width: 100%; height: 100%; padding: 0px; border-color: rgb(0, 0, 0); border-width: 1px; border-style: solid; background-color: rgba(245, 245, 245, 0.74); border-radius: 5px; backdrop-filter: blur(0.3px); transform: scaleY(1); overflow: hidden;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);"><div style="height: 0%; width: 0%; padding: 0px; margin: 0px; border-width: 0px; border-radius: 5px; backdrop-filter: blur(0.3px); box-shadow: rgba(102, 102, 102, 0.79) -1.10218e-15px 6px 8.3px 6px;" data-ref="progressBar" class="progress-barCh" orientation="vertical" data-value="0" data-range="0"> </div></div> <script> if (document.querySelector('.container-wrapper-genially')) { var progress = document.querySelectorAll("div[data-ref=progressBar]"); for (var i = 0; i < progress.length && !progress[i].getAttribute('data-init'); i++) { if (progress[i].getAttribute('orientation') == 'vertical') { progress[i].style.height = 0 + "%"; progress[i].style['-webkit-transition-property'] = "background-color, height"; progress[i].style['-moz-transition-property'] = "background-color, height"; progress[i].style['-o-transition-property'] = "background-color, height"; progress[i].style['transition-property'] = "background-color, height"; progress[i].parentNode.style.webkitTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.mozTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.msTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.oTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.transform = 'rotateX('+180+'deg)'; progress[i].style.webkitTransform = 'rotateX('+180+'deg)'; progress[i].style.mozTransform = 'rotateX('+180+'deg)'; progress[i].style.msTransform = 'rotateX('+180+'deg)'; progress[i].style.oTransform = 'rotateX('+180+'deg)'; progress[i].style.transform = 'rotateX('+180+'deg)'; progress[i].style.width = 100 + "%"; } else { progress[i].style.height = 100 + "%"; } var url = window.location.pathname.split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { var referencia = url[y]; found = true; } } var textosAdjuntos = progress[i].closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) {} else if (texto.innerText.trim().substring(0, 3) == 'htt') { url = texto.innerText.trim().split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { referencia = url[y]; found = true; } } texto.style.display = 'none' } } var claveCadena = localStorage.getItem('claveGenerada' + referencia); actualizaBarra(claveCadena, progress[i]); progress[i].setAttribute('data-init', true); } } function actualizaBarra(claveCadena, barra) { var progress = barra; let grupo = progress.closest('div.genially-animated-wrapper'); var txtBarra = getTexte(progress); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = 0 + "%"; progress.setAttribute('data-value', 0); } else { progress.style.width = 0 + "%"; progress.setAttribute('data-value', 0); } if (txtBarra) { txtBarra.innerText = 0 + "%" }; if (claveCadena) { var found = (claveCadena.match(/true/gi) ? claveCadena.match(/true/gi).length : 0), notFound = (claveCadena.match(/false/gi) ? claveCadena.match(/false/gi).length : 0); var avance = Math.max(((found - 1)/(notFound + found) * 100), 0); var value = parseInt(progress.getAttribute('data-value')); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = avance + "%"; progress.setAttribute('data-value', avance); } else { progress.style.width = avance + "%"; progress.setAttribute('data-value', avance); } console.log("actualizando la barra con digito"); let idInterval = setInterval(function () { value = parseInt(progress.getAttribute('data-value')); var range; if (value >= (found/(notFound + found) * 100) - 1) { clearInterval(idInterval); value = (found/(notFound + found) * 100); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else if (value < 100){ range = 80; } else if (value == 100){ range = 100; } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%" }; } else { value++; if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else if (value < 100){ range = 80; } else if (value == 100){ range = 100; } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%"; } } }, 100); } } function getTexte(progress) { var textosAdjuntos = progress.closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) { var lastElementChild = texto; while (lastElementChild.firstChild) { lastElementChild = lastElementChild.firstChild; } return lastElementChild.parentNode; } } } </script>
Barras de progreso que cambian de color
Reemplaza el texto en negrita por los colores que quieras. También opta por horizontal o vertical. Luego, copia todo el texto e insértalo en tu itinerario
Cambia de color según %
80%
80%