Mathmental Royale.
Tizas Digitales
Created on May 12, 2022
Practica las Fases de la suma del ABN con este juego de cálculo mental.
More creations to inspire you
SLYCE DECK
Personalized
LET’S GO TO LONDON!
Personalized
ENERGY KEY ACHIEVEMENTS
Personalized
HUMAN AND SOCIAL DEVELOPMENT KEY
Personalized
CULTURAL HERITAGE AND ART KEY ACHIEVEMENTS
Personalized
DOWNFALLL OF ARAB RULE IN AL-ANDALUS
Personalized
ABOUT THE EEA GRANTS AND NORWAY
Personalized
Transcript
Reutilizar
Las imágenes de este juego son propiedad de Super Cell y se utilizan con caracter educativo, nunca con ánimo de lucho.
- 12
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Una épica batalla está a punto de comenzar.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Desmuestra tu habilidad con el cálculo mental.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Consigue recompensas en cada desafio.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
¡ y derrota al Rey Rojo !
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
En cada Arena puedes utilizar algunos de estos objetos.
Tiempo extra +15 "
Tiempo extra +30 "
Tiempo extra +60 "
Pasar pregunta
Escribe tu nombre
Elige tu campeón de batalla
§eval{$Q12:SH < 10}§:true
§eval{$Q12:SH < 15}§:true
§eval{$Q12:SH >= 20}§:true
§eval{$Q11:SH < 10}§:true
§eval{$Q11:SH < 15}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q11:SH >= 20}§:true
§eval{$Q10:SH < 15}§:true
§eval{$Q9:SH < 10}§:true
§eval{$Q10:SH >= 20}§:true
§eval{$Q9:SH < 15}§:true
§eval{$Q8:SH < 10}§:true
§eval{$Q9:SH >= 20}§:true
§eval{$Q8:SH < 15}§:true
§eval{$Q7:SH < 10}§:true
§eval{$Q8:SH >= 20}§:true
§eval{$Q7:SH < 15}§:true
§eval{$Q6:SH < 10}§:true
§eval{$Q7:SH >= 20}§:true
§eval{$Q2:SH < 10}§:true
§eval{$Q6:SH < 15}§:true
§eval{$Q5:SH < 10}§:true
§eval{$Q2:SH < 15}§:true
§eval{$Q6:SH >= 20}§:true
§eval{$Q4:SH < 10}§:true
§eval{$Q5:SH < 15}§:true
§eval{$Q2:SH >= 20}§:true
§eval{$Q5:SH >= 20}§:true
§eval{$Q3:SH < 10}§:true
§eval{$Q4:SH < 15}§:true
§eval{$Q4:SH >= 20}§:true
§eval{$Q3:SH < 15}§:true
§nom§
§nom§
§eval{$Q3:SH >= 20}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q1:SH < 15}§:true
§eval{$Q1:SH >= 20}§:true
$3
i
i
§nom§
$[20%:1, 40% : 2, 60% : 3]
§nom§
$3
Fase 1
Fase 2
Fase 3
Fase 4
Fase 5
Fase 6
Fase 7
Fase 8
Fase 9
Fase 10
Fase 11
Fase 12
SUMAS ABN Fase 1. Sumas con combinaciones básicas hasta el 10
SUMAS ABN Fase 2.4. Sumas de 3 dígitos rebasando decena en las dos combinaciones.
SUMAS ABN Fase 3. Sumas de decenas completas más dígitos.
SUMAS ABN Fase 4. Sumas de decenas completas: extensión de la tabla de sumar.
SUMAS ABN Fase 5. Sumas de decenas completas más decenas incompletas.
SUMAS ABN Fase 6. Sumas de decenas incompletas más digitos
SUMAS ABN Fase 7. Suma de decenas incompletas mas decenas incompletas.
SUMAS ABN Fase 1. Sumas de decenas completas mas decenas completas mas unidades.
SUMAS ABN Fase 9. Suma de centenas incompletas mas unidades.
SUMAS ABN Fase 1. Sumas de centenas incompletas mas decenas completas.
SUMAS ABN Fase 11. Sumas de centenas incompletas mas decenas incompletas.
SUMAS ABN Fase 12. Sumas de centenas incompletas mas centenas incompletas.
§nom§
§nom§
¡Aquí tienes tu progreso, §nom§!
$3
$Q1:SP
$Q2:SP
$Q1:SH
$Q2:SH
$Q4:SP
$Q5:SP
$Q6:SP
$Q4:SH
$Q7:SP
$Q5:SH
$Q8:SP
$Q9:SP
$Q6:SH
$Q10:SP
$Q7:SH
$Q11:SP
$Q8:SH
$Q12:SP
$Q9:SH
$Q10:SH
$Q11:SH
$Q12:SH
$Q3:SP
$Q3:SH
01:00
PER
$TXT FEEDBACK$
quiz, 5, T:Q1
¡ Genial !
$1
01:00
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Fase 1
true
$J1:"§nom§"
$SCORE1
$TXT QUIZ$ Texto del enunciado
Reinicia
$J1:"§nom§"
$HITS1
- &100 $v1[1,9] + $v2[1,9]
- eval{$v2+$v1}
Volver
30
Algo salió mal
$3
$2
$Q1:SP
$Q1:SH
Recompensa
§eval{$Q1:SH <= 2}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q1:SH < 15}§:true
§eval{$Q1:SH >= 20}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q1:SH < 15}§:true
§eval{$Q1:SH >= 20}§:true
- &100 $v1[0,9] + $v2[0,9] + $v3[1,9]
- eval{$v2+$v1+$v3}
- &100 $v1[1,9] + $v2[0,9] + $v3[0,9]
- eval{$v2+$v1+$v3}
- &100 $v1[0,9] + $v2[1,9] + $v3[0,9]
- eval{$v2+$v1+$v3}
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
Fase 2
$TXT FEEDBACK$
01:00
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
$HITS1
true
$TXT QUIZ$ Texto del enunciado
Reinicia
¡ Genial !
$1
quiz, 5, T:Q2
Volver
Algo salió mal
$3
$2
00:30
00:15
01:00
§eval{$Q2:SH <= 2}§:true
§eval{$Q2:SH < 10}§:true
§eval{$Q2:SH < 15}§:true
§eval{$Q2:SH >= 20}§:true
$Q2:SP
$Q2:SH
Recompensa
§eval{$Q2:SH < 10}§:true
§eval{$Q2:SH >= 20}§:true
§eval{$Q2:SH < 15}§:true
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
PER
- &100 $v1[10/20/30/40/50/60/70/80/90] + $v2[1,10]
- eval{$v1+$v2}
Fase 3
$TXT FEEDBACK$
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
01:00
$HITS1
true
$TXT QUIZ$ Texto del enunciado
Reinicia
¡ Genial !
$1
quiz, 5, T:Q3
00:15
Volver
01:00
00:30
Algo salió mal
$3
$2
§eval{$Q3:SH <= 2}§:true
§eval{$Q3:SH < 10}§:true
§eval{$Q3:SH < 15}§:true
§eval{$Q3:SH >= 20}§:true
$Q3:SP
$Q3:SH
Recompensa
§eval{$Q3:SH < 10}§:true
§eval{$Q3:SH < 15}§:true
§eval{$Q3:SH >= 20}§:true
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
PER
- &100 $v1[10/20/30/40/50/60/70/80/90] + $v2[10/20/30/40/50/60/70/80/90]
- eval{$v1+$v2}
Fase 4
$TXT FEEDBACK$
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
02:00
$HITS1
¡ Genial !
true
$TXT QUIZ$ Texto del enunciado
$1
Reinicia
quiz, 5, T:Q4
00:30
01:00
00:15
Volver
Algo salió mal
$3
$2
§eval{$Q4:SH <= 2}§:true
§eval{$Q4:SH < 10}§:true
§eval{$Q4:SH < 15}§:true
§eval{$Q4:SH >= 20}§:true
$Q4:SP
$Q4:SH
Recompensa
§eval{$Q4:SH < 10}§:true
§eval{$Q4:SH >= 20}§:true
§eval{$Q4:SH < 15}§:true
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
PER
- &100 $v1[10/20/30/40/50/60/70/80/90] + $v2[11,99]
- eval{$v1+$v2}
Fase 5
$TXT FEEDBACK$
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
02:00
$HITS1
¡ Genial !
true
$TXT QUIZ$ Texto del enunciado
$1
Reinicia
quiz, 5, T:Q5
00:30
01:00
00:15
Volver
Algo salió mal
$3
$2
§eval{$Q5:SH <= 2}§:true
§eval{$Q5:SH < 10}§:true
§eval{$Q5:SH < 15}§:true
§eval{$Q5:SH >= 20}§:true
$Q5:SP
$Q5:SH
Recompensa
§eval{$Q5:SH < 15}§:true
§eval{$Q5:SH < 10}§:true
§eval{$Q5:SH >= 20}§:true
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
02:00
Fase 6
- &100 $v1[11,99] + $v2[1,9]
- eval{$v1+$v2}
- &100 $v3[1,9] + $v4[11,99]
- eval{$v3+$v4}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
$J1:"§nom§"
Reinicia
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q6
Algo salió mal
$3
$2
00:30
01:00
00:15
§eval{$Q6:SH <= 2}§:true
§eval{$Q6:SH < 10}§:true
§eval{$Q6:SH < 15}§:true
§eval{$Q6:SH >= 20}§:true
$Q6:SP
$Q6:SH
Recompensa
§eval{$Q6:SH >= 20}§:true
§eval{$Q6:SH < 15}§:true
§eval{$Q6:SH < 10}§:true
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
03:00
Fase 7
- &100 $v1[11,99] + $v2[11,99]
- eval{$v1+$v2}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
$J1:"§nom§"
Reinicia
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q7
Algo salió mal
$3
00:30
01:00
$2
00:15
§eval{$Q7:SH <= 2}§:true
§eval{$Q7:SH < 10}§:true
§eval{$Q7:SH < 15}§:true
§eval{$Q7:SH >= 20}§:true
$Q7:SP
$Q7:SH
Recompensa
§eval{$Q7:SH >= 20}§:true
§eval{$Q7:SH < 15}§:true
§eval{$Q7:SH < 10}§:true
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
03:00
Fase 8
- &100 $v1[100/200/300/400/500/600/700/800/900] + $v2[10/20/30/40/50/60/70/80/90] + $v3[1,9]
- eval{$v1+$v2+$v3}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
Reinicia
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q8
Algo salió mal
$3
$2
00:30
01:00
00:15
§eval{$Q8:SH <= 2}§:true
§eval{$Q8:SH < 10}§:true
§eval{$Q8:SH < 15}§:true
§eval{$Q8:SH >= 20}§:true
$Q8:SP
$Q8:SH
Recompensa
§eval{$Q8:SH < 10}§:true
§eval{$Q8:SH < 15}§:true
§eval{$Q8:SH >= 20}§:true
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
03:30
Fase 9
- &100 $v1[111,999] + $v2[1,9]
- eval{$v1+$v2}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
Reinicia
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q9
Algo salió mal
$3
00:30
$2
01:00
00:15
§eval{$Q9:SH <= 2}§:true
§eval{$Q9:SH < 10}§:true
§eval{$Q9:SH < 15}§:true
§eval{$Q9:SH >= 20}§:true
$Q9:SP
$Q9:SH
Recompensa
§eval{$Q9:SH < 10}§:true
§eval{$Q9:SH < 15}§:true
§eval{$Q9:SH >= 20}§:true
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
03:30
Fase 10
- &100 $v1[111,999] + $v2[10/20/30/40/50/60/70/80/90]
- eval{$v1+$v2}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
Reinicia
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q10
Algo salió mal
$3
00:30
01:00
00:15
$2
§eval{$Q10:SH <= 2}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q10:SH < 15}§:true
§eval{$Q10:SH >= 20}§:true
$Q10:SP
$Q10:SH
Recompensa
§eval{$Q10:SH >= 20}§:true
§eval{$Q10:SH < 15}§:true
§eval{$Q10:SH < 10}§:true
§
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
04:00
Fase 11
- &100 $v1[111,999] + $v2[11,99]
- eval{$v1+$v2}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
Reinicia
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q11
Algo salió mal
$3
00:30
01:00
$2
00:15
§eval{$Q11:SH <= 2}§:true
§eval{$Q11:SH < 10}§:true
§eval{$Q11:SH < 15}§:true
§eval{$Q11:SH >= 20}§:true
$Q11:SP
$Q11:SH
Recompensa
§eval{$Q11:SH < 10}§:true
§eval{$Q11:SH < 15}§:true
§eval{$Q11:SH >= 20}§:true
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- disabled
- disabled
- disabled
- ¡VAMOS $P!
04:00
Fase 12
- &100 $v1[111,999] + $v2[111,999]
- eval{$v1+$v2}
true
$TXT QUIZ$ Texto del enunciado
$TXT FEEDBACK$
Reinicia
$J1:"§nom§"
$SCORE1
$J1:"§nom§"
$HITS1
¡ Genial !
$1
Volver
quiz, 5, T:Q12
Algo salió mal
00:30
$3
01:00
00:15
$2
§eval{$Q12:SH <= 2}§:true
§eval{$Q12:SH < 10}§:true
$Q12:SP
$Q12:SH
§eval{$Q12:SH < 15}§:true
§eval{$Q12:SH >= 20}§:true
§eval{$Q1:SH >= 10}§:true
§
- 900
- 80
- 10
- 900
¡Eres un autentico maestro del cálculo mental!
¡Enhorabuena!Has conseguido superar todos los desafios.
Elemento obligatorio en la primera página que se debe agrupar con un botón de continuar.
Coloca este elemento en la página del GICODE. Puedes cambiar el formato de la fuente.El texto (opcional) se reemplazará con el código final obtenido
Barras de progreso
Elemento obligatorio. Se debe poner en una página por la que obligatoriamente pasen al principio. Por ejemplo, la de introducción.
Coloca este elemento en una página para borrar los datos de partida.
Juego completado. Opcional. Puede usarse si no se implementa un candado. Coloca este objeto en una página donde quieras que el juego se de por terminado.
Elige el modelo que más se adapte a la estética de tu Breakout
Página de creación
- 5 indica el número de retos. Si escribes un valor de más de 2 cifras lo asumirá como clave predefinida, con tantos retos como dígitos tenga el número introducido
- [1-5] indica el rango de valores posibles para la clave. Opcional, si no se incluye se considerará [0-9].
- color añade un color asociado a cada dígito. Opcional.
- Son los colores que asociaremos a la clave. (Ej: #FF0000). Es algo opcional y puede no incluirse.
- no-repeat hace que los dígitos/imágenes/colores de la contraseña no se repitan
- 5
- [1-5]
- color
- #FF9900, #FAF700, #00CC00, #FF0000, #6633FF
- no-repeat
Dígitos. Número conseguido al superar un reto
Página de creación
Agrupar con un texto. Colocarla en la última página del reto, al conseguir la recompensa de ese reto
Recompensas
Agrupar con #. Saldrá el dígito de la contraseña conseguido de cada reto.Agrupar con imagen o texto de recompensa. Aparecerá la imagen y/o texto del reto conseguido.Agrupar con imagen de feedback de reto conseguido. Se puede poner encima del mapa para marcar retos conseguidos e incluso impedir que se repitan.
Agrupar con imageno cualquier elemento Genially.Aparece cuando se haya conseguido la recompensa final del itinerario.
Candados
Agrupar con imagen o cualquier elemento Genially. Los candados hacen visible un elemento hasta que se completen las misiones anteriores, después se ocultará. Agrupado a un elemento que cubra el enlace a la misión correspondiente, por ejemplo, impedirá realizar dicha misión hasta completar las anteriores.
Candado boss.Agrupar con imageno cualquier elemento Genially. para bloquear el enigma o candado final. Desaparecerá al conseguir todos los retos.
OFF
Agrupar con imagen o cualquier elemento Genially.Se ocultará cuando consigas una misión.
OFF Boss.Agrupar con imagen o cualquier elemento Genially. Desaparece cuando se haya conseguido la recompensa final
[3]
[3]
Otorga la recompensa que indica al hacer click.
Página de creación para código de colores
Agrupar con cualquier elemento Genially para hacerlo visible y clicable.
Recompensas
RETOMAR LA PARTIDA
Alto
Ancho
Taille bordure
Couleur bordure
Couleur fond
Couleur police
Taille police
Style bordure
Nom police
AbeeZee
Abel
Abhaya Libre
AbeeZee
Aclonica
AbeeZee
Actor
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
Texte à copier puis entrer dans "insérer , </> Autres" sous genially pour obtenir des boîtes compatibles avec l'extension présentant votre aspect personnalisé
Aperçu boîte personnalisée
Se mettre en mode prévisualisation pour changer les paramètres
Opacité fond
Nom variable
INPUTCREATOR
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>
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
Barras de progreso que cambian de color
Cambia de color según %
80%
80%