Want to create interactive content? It’s easy in Genially!
Quizz Tablas de Multiplicar
Tizas Digitales
Created on May 27, 2022
Repasar y trabajar las tablas de multiplicar con MathQuiz
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Nueva Partida
Reutilizar
Continuar
El malvado Multiplicus ha robado todos los huevos de dragón que quedan en el reino de Mathland.
- 900
- 80
- 10
- 900
- 9
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Multiplicus ha abierto portales a otros mundos y ha escondido allí los huevos de dragón.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Multiplicus ha dejado abiertos los portales, adéntrate en ellos y derrota a todos los monstruos que los guardan.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Recupera los huevos de dragón antes de enfrentarte a Multiplicus.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Puedes adentrarte en los portales todas las veces que quieras, pero recuerda que para enfrentarte a Multiplicus debes recuperar antes todos los huevos de dragón.
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
Elige tu campeón de batalla
Escribe tu nombre
§nom§: *3
Encontrarás estos elementos en tus pantallas de juego.
Aciertos
Vidas
Tiempo
Monedas
Tiempo Extra 15"
Tiempo Extra 30"
Tiempo Extra 1'
Pasar Pregunta
- 900
- 80
- 10
- 900
https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96
§nom§
§nom§
80%
Si inicias una nueva partida perderás todo el progreso y tus recompensas.
Tabla del 4
Tabla del 3
Tabla del 2
Tabla del 5
Tabla del 6
Reiniciar
Tabla del 7
Tabla del 8
Tabla del 10
Tabla del 9
Multiplicus
§nom§
§nom§
Tabla del 6
Tabla del 5
Tabla del 4
Tabla del 3
Tabla del 2
$Q5:SP
$Q5:SH
$Q4:SP
$Q4:SH
$Q2:SP
$Q2:SH
$Q3:SP
$Q3:SH
$Q1:SP
$Q1:SH
Tabla del 9
Tabla del 10
Tabla del 8
Tabla del 7
$Q9:SP
$Q9:SH
$Q8:SP
$Q8:SH
$Q7:SP
$Q7:SH
$Q6:SP
$Q6:SH
§nom§
§nom§
Ver Ranking
Ver Ranking
Ver Ranking
Ver Ranking
Ver Ranking
Tabla del 6
Tabla del 5
Tabla del 4
Tabla del 3
Tabla del 2
$Q3:RP
$Q4:RP
$Q5:RP
$Q2:RP
$Q1:RP
$Q1:RS
$Q1:RH
$Q2:RS
$Q2:RH
$Q3:RS
$Q3:RH
$Q4:RS
$Q4:RH
$Q5:RS
$Q5:RH
Ver Ranking
Ver Ranking
Ver Ranking
Ver Ranking
Ver Ranking
Multiplicus
Tabla del 9
Tabla del 10
Tabla del 8
Tabla del 7
$Q10:RP
$Q9:RP
$Q8:RP
$Q7:RP
$Q6:RP
$Q10:RS
$Q10:RH
$Q6:RS
$Q6:RH
$Q7:RS
$Q7:RH
$Q8:RS
$Q8:RH
$Q9:RS
$Q9:RH
Tabla del 2
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
00:30
- &50 $v1[2,2] x $v2[0,10]
- eval{$v2*$v1}
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q1
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q1:SP
$Q1:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 2. Sigue para recuperar el huevo de dragón.
§eval{$Q1:SH > 10}§:true
Seguir
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q1:SH <= 10}§:true
$Q1:SP
$Q1:SH
§nom§
§nom§
§eval{$Q1:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 2
$Q1:RS
$Q1:RH
$Q1:RP
$Q1:rs2
$Q1:rh2
$Q1:rp2
$Q1:rs3
$Q1:rh3
$Q1:rp3
$Q1:rs4
$Q1:rh4
$Q1:rp4
$Q1:rs5
$Q1:rh5
$Q1:rp5
$Q1:rs6
$Q1:rh6
$Q1:rp6
$Q1:rs7
$Q1:rh7
$Q1:rp7
$Q1:rs8
$Q1:rh8
$Q1:rp8
$Q1:rs9
$Q1:rh9
$Q1:rp9
Tabla del 3
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
00:30
- &50 $v1[3,3] x $v2[0,10]
- eval{$v2*$v1}
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q2
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q2:SP
$Q2:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 3. Sigue para recuperar el huevo de dragón.
§eval{$Q2:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q2:SH <= 10}§:true
Seguir
$Q2:SP
$Q2:SH
§nom§
§nom§
§eval{$Q2:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 3
$Q2:RS
$Q2:RH
$Q2:RP
$Q2:rs2
$Q2:rh2
$Q2:rp2
$Q2:rs3
$Q2:rh3
$Q2:rp3
$Q2:rs4
$Q2:rh4
$Q2:rp4
$Q2:rs5
$Q2:rh5
$Q2:rp5
$Q2:rs6
$Q2:rh6
$Q2:rp6
$Q2:rs7
$Q2:rh7
$Q2:rp7
$Q2:rs8
$Q2:rh8
$Q2:rp8
$Q2:rs9
$Q2:rh9
$Q2:rp9
Tabla del 4
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
00:30
- &50 $v1[4,4] x $v2[0,10]
- eval{$v2*$v1}
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q3
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q3:SP
$Q3:SH
§nom§
§nom§
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q3:SH <= 10}§:true
¡Genial! Has derrotado al monstruo de la tabla del 4. Sigue para recuperar el huevo de dragón.
§eval{$Q3:SH > 10}§:true
Seguir
Seguir
$Q3:SP
$Q3:SH
§nom§
§nom§
§eval{$Q3:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 4
$Q3:RS
$Q3:RH
$Q3:RP
$Q3:rs2
$Q3:rh2
$Q3:rp2
$Q3:rs3
$Q3:rh3
$Q3:rp3
$Q3:rs4
$Q3:rh4
$Q3:rp4
$Q3:rs5
$Q3:rh5
$Q3:rp5
$Q3:rs6
$Q3:rh6
$Q3:rp6
$Q3:rs7
$Q3:rh7
$Q3:rp7
$Q3:rs8
$Q3:rh8
$Q3:rp8
$Q3:rs9
$Q3:rh9
$Q3:rp9
Tabla del 5
Comodines
01:00
$J1:"§nom§"
$J1:"§nom§"
- &50 $v1[5,5] x $v2[0,10]
- eval{$v2*$v1}
00:30
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q4
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q4:SP
$Q4:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 5. Sigue para recuperar el huevo de dragón.
§eval{$Q4:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q4:SH <= 10}§:true
Seguir
$Q4:SP
$Q4:SH
§nom§
§nom§
§eval{$Q4:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 5
$Q4:RS
$Q4:RH
$Q4:RP
$Q4:rs2
$Q4:rh2
$Q4:rp2
$Q4:rs3
$Q4:rh3
$Q4:rp3
$Q4:rs4
$Q4:rh4
$Q4:rp4
$Q4:rs5
$Q4:rh5
$Q4:rp5
$Q4:rs6
$Q4:rh6
$Q4:rp6
$Q4:rs7
$Q4:rh7
$Q4:rp7
$Q4:rs8
$Q4:rh8
$Q4:rp8
$Q4:rs9
$Q4:rh9
$Q4:rp9
Tabla del 6
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
- &50 $v1[6,6] x $v2[0,10]
- eval{$v2*$v1}
00:30
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q5
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q5:SP
$Q5:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 6. Sigue para recuperar el huevo de dragón.
§eval{$Q5:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q5:SH <= 10}§:true
Seguir
$Q5:SP
$Q5:SH
§nom§
§nom§
§eval{$Q5:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 6
$Q5:RS
$Q5:RH
$Q5:RP
$Q5:rs2
$Q5:rh2
$Q5:rp2
$Q5:rs3
$Q5:rh3
$Q5:rp3
$Q5:rs4
$Q5:rh4
$Q5:rp4
$Q5:rs5
$Q5:rh5
$Q5:rp5
$Q5:rs6
$Q5:rh6
$Q5:rp6
$Q5:rs7
$Q5:rh7
$Q5:rp7
$Q5:rs8
$Q5:rh8
$Q5:rp8
$Q5:rs9
$Q5:rh9
$Q5:rp9
Tabla del 7
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
00:30
- &50 $v1[7,7] x $v2[0,10]
- eval{$v2*$v1}
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q6
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q6:SP
$Q6:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 7. Sigue para recuperar el huevo de dragón.
§eval{$Q6:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q6:SH <= 10}§:true
Seguir
$Q6:SP
$Q6:SH
§nom§
§nom§
§eval{$Q6:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 7
$Q6:RS
$Q6:RH
$Q6:RP
$Q6:rs2
$Q6:rh2
$Q6:rp2
$Q6:rs3
$Q6:rh3
$Q6:rp3
$Q6:rs4
$Q6:rh4
$Q6:rp4
$Q6:rs5
$Q6:rh5
$Q6:rp5
$Q6:rs6
$Q6:rh6
$Q6:rp6
$Q6:rs7
$Q6:rh7
$Q6:rp7
$Q6:rs8
$Q6:rh8
$Q6:rp8
$Q6:rs9
$Q6:rh9
$Q6:rp9
Tabla del 8
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
- &50 $v1[8,8] x $v2[0,10]
- eval{$v2*$v1}
00:30
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q7
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q7:SP
$Q7:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 8. Sigue para recuperar el huevo de dragón.
§eval{$Q7:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q7:SH <= 10}§:true
Seguir
$Q7:SP
$Q7:SH
§nom§
§nom§
§eval{$Q7:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 8
$Q7:RS
$Q7:RH
$Q7:RP
$Q7:rs2
$Q7:rh2
$Q7:rp2
$Q7:rs3
$Q7:rh3
$Q7:rp3
$Q7:rs4
$Q7:rh4
$Q7:rp4
$Q7:rs5
$Q7:rh5
$Q7:rp5
$Q7:rs6
$Q7:rh6
$Q7:rp6
$Q7:rs7
$Q7:rh7
$Q7:rp7
$Q7:rs8
$Q7:rh8
$Q7:rp8
$Q7:rs9
$Q7:rh9
$Q7:rp9
Tabla del 9
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
00:30
- &50 $v1[9,9] x $v2[0,10]
- eval{$v2*$v1}
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q8
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q8:SP
$Q8:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 9. Sigue para recuperar el huevo de dragón.
§eval{$Q8:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q8:SH <= 10}§:true
Seguir
$Q8:SP
$Q8:SH
§nom§
§nom§
§eval{$Q8:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 9
$Q8:RS
$Q8:RH
$Q8:RP
$Q8:rs2
$Q8:rh2
$Q8:rp2
$Q8:rs3
$Q8:rh3
$Q8:rp3
$Q8:rs4
$Q8:rh4
$Q8:rp4
$Q8:rs5
$Q8:rh5
$Q8:rp5
$Q8:rs6
$Q8:rh6
$Q8:rp6
$Q8:rs7
$Q8:rh7
$Q8:rp7
$Q8:rs8
$Q8:rh8
$Q8:rp8
$Q8:rs9
$Q8:rh9
$Q8:rp9
Tabla del 10
Comodines
02:00
$J1:"§nom§"
$J1:"§nom§"
- &100 $v1[10,10] x $v2[0,10]
- eval{$v2*$v1}
00:30
¡Genial!
Seguir
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
$HITS1
$SCORE1
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- ¡VAMOS!
quiz, 5, T:Q9
Reiniciar
Volver
PER
true
$TXT FEEDBACK$
$Q9:SP
$Q9:SH
§nom§
§nom§
¡Genial! Has derrotado al monstruo de la tabla del 10. Sigue para recuperar el huevo de dragón.
§eval{$Q9:SH > 10}§:true
Seguir
¡Has derrotado al monstruo pero no hay ni rastro del huevo! creo que deberás volver a intentarlo
§eval{$Q9:SH <= 10}§:true
Seguir
$Q9:SP
$Q9:SH
§nom§
§nom§
§eval{$Q9:SH > 10}§:true
Seguir
§nom§
§nom§
Tabla del 10
$Q9:RS
$Q9:BH
$Q9:RP
$Q9:rp2
$Q9:rs2
$Q9:rh2
$Q9:rp3
$Q9:rs3
$Q9:rh3
$Q9:rp4
$Q9:rs4
$Q9:rh4
$Q9:rp5
$Q9:rs5
$Q9:rh5
$Q9:rp6
$Q9:rs6
$Q9:rh6
$Q9:rs7
$Q9:rh7
$Q9:rp7
$Q9:rs8
$Q9:rh8
$Q9:rp8
$Q9:rp9
$Q9:rs9
$Q9:rh9
¿Cómo has llegado hasta aquí? Es imposible que hayas derrotado a todos mis monstruos, ¡acabaré contigo §nom§!
Boss Final
$1
02:00
- &20 $v1[0,10] x $v2[0,10]
- eval{$v2*$v1}
¡Genial!
Seguir
true
$HITS1
$SCORE1
00:30
00:15
01:00
Algo salió mal
Algo salió mal
$TXT QUIZ$ Texto del enunciado
PER
- ¡BUENA SUERTE!
- ¡NO ES CORRECTO!
- ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
- ¡HAS GANADO!
- disabled
- GOLPE BRUTAL X3
- GOLPE CRÍTICO X2
- PRUEBA DE NUEVO
- ¡VAMOS!
quiz, 5, T:Q10
$J1:"§nom§"
$J1:"§nom§"
Reiniciar
Volver
Multiplicus
Multiplicus
$TXT FEEDBACK$
$TQ10:SP
$TQ10:SH
§nom§
§nom§
Seguir
¡Has derrotado a Multiplicus pero ha conseguido escapar! creo que deberás volver a intentarlo para capturarlo.
§eval{$Q10:SH <= 10}§:true
¡Has derrotado a Multiplicus! Utiliza el portal salir de aquí
§eval{$Q10:SH > 10}§:true
§eval{$Q10:SH > 10}§:true
§nom§
§nom§
Multiplicus
$Q10:RS
$Q10:RH
$Q10:RP
$Q10:rs2
$Q10:rh2
$Q10:rp2
$Q10:rs3
$Q10:rh3
$Q10:rp3
$Q10:rs4
$Q10:rh4
$Q10:rp4
$Q10:rs5
$Q10:rh5
$Q10:rp5
$Q10:rs6
$Q10:rh6
$Q10:rp6
$Q10:rs7
$Q10:rh7
$Q10:rp7
$Q10:rs8
$Q10:rh8
$Q10:rp8
$Q10:rs9
$Q10:rh9
$Q10:rp9
¡Enhorabuena! Has conseguido derrotar a Multiplicus y recuparar todos los huevos de dragón desaparecidos.
- 900
- 80
- 10
- 900
¡Eres un auténtico maestro de las multiplicaciones!
Volver al mapa
Nueva Partida
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%