Want to create interactive content? It’s easy in Genially!
CLASH ROYAL (MULTIPLICACIONES)
M.Mediterránea
Created on November 26, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Correct Concepts
View
Microcourse: Artificial Intelligence in Education
View
Puzzle Game
View
Scratch and Win
View
Microlearning: How to Study Better
View
Branching Scenarios Challenge Mobile
View
Branching Scenario Mission: Innovating for the Future
Transcript
Una épica batalla está a punto de comenzar.
- 900
- 80
- 10
- 900
- 12
https://view.genial.ly/65a2c87754a170001489af93
Desmuestra tu habilidad con las tablas de multiplicar.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Sube de nivel y avanza por las diferentes arenas y ...
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
¡Conviértete en el Rey de las Multiplicaciones!
- 900
- 80
- 10
- 900
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
01: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%