Want to create interactive content? It’s easy in Genially!

Get started free

MUSIC CLASS ROYALE

fdiegueznavarro

Created on March 20, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Mobile Use Simulation

Course 3D Style

Choose Your Team

Internal Company Culture Game

Retro Bits Quiz

Products and Services Game

Dynamic Onboarding Game

Explore all templates

Transcript

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.

  • 900
  • 80
  • 10
  • 900
  1. 12
https://view.genial.ly/65a2c87754a170001489af93

Desmuestra tu habilidad con los intervalos musicales.

  • 900
  • 80
  • 10
  • 900

https://view.genial.ly/618f006411e2140dfeae94ba, https://view.genial.ly/613b90a254e6970d68fc6c96

Acierta al menos 5 intervalos en cada nivel, 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 o Reina de los Intervalos!

  • 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

  1. 12

$3

§nom§

§nom§

Arena 3
Arena 5
Arena 4
Arena 2
Arena 1
Arena 8
Arena 6
Arena 10
Arena 7
Arena 9

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

¡NIVEL DESBLOQUEADO!

$3

§nom§

§nom§

¡NIVEL DESBLOQUEADO!

VER PUNTUACIONES

VER INSTRUCCIONES

¡NIVEL DESBLOQUEADO!

$3

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

¡NIVEL DESBLOQUEADO!

$3

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

¡NIVEL DESBLOQUEADO!

$3

§nom§

§nom§

Arena 6
Arena 3
Arena 4
Arena 5
Arena 2
Arena 1

Sitúate sobre una Arena para ver las instrucciones

Arena 10
Arena 7
Arena 9
Arena 8

$[20%:1, 40% : 2, 60% : 3]

JUGAR

$3

§nom§

§nom§

Arena 6
Arena 3
Arena 4
Arena 5
Arena 2
Arena 1

Sitúate sobre una Arena para ver las instrucciones

Arena 10
Arena 7
Arena 9
Arena 8

$[20%:1, 40% : 2, 60% : 3]

SEGUIR JUGANDO

¡Aquí tienes tu progreso, §nom§!

$3

§nom§

§nom§

$Q6:SH
$Q3:SP
$Q6:SP
$Q4:SH
$Q4:SP
$Q5:SH
$Q3:SH
$Q5:SP
$Q10:SP
$Q10:SH
$Q2:SP
$Q2:SH

SEGUIR JUGANDO

$Q9:SH
$Q8:SH
$Q8:SP
$Q7:SH
$Q9:SP

¡¡ META !!

$Q7:SP

30

Quiz,5, T:Q1

Tabla del 2

$3

01:30

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

PASAR

  1. &100 $v1[1,9] x 2
    1. eval{$v1* 2}

true

¡ Genial $J1:"§nom§" !

$1

¡Debes repasar estos intervalos!

$2

PER

$TXT QUIZ$ Texto del enunciado

Inicio
  • ¡BUENA SUERTE!
  • ¡No, no! | Ups!|Ni de broma | ¿En serio?
  • ¡MUY BIEN! | ¡GENIAL! ESTUPENDO | Por los pelos
  • ¡GRANDE!
  • disabled
  • disabled
  • disabled
  • ¡VAMOS $P!
Intentar de nuevo

$TXT FEEDBACK$

Quiz,5, T:Q10

Todas las tablas

$3

01:30

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

PASAR

true

  1. &100 $v1[1,9] x $v2[1,9]
    1. eval{$v1* $v2}

¡Debes repasar estos intervalos!

$2

¡ Genial $J1:"§nom§" !

$1

PER

Inicio

$TXT QUIZ$ Texto del enunciado

  1. &100 $v1[111,999] + $v2[10/20/30/40/50/60/70/80/90]
    1. eval{$v1+$v2}
    Intentar de nuevo

    $TXT FEEDBACK$

    • ¡BUENA SUERTE!
    • ¡NO ES CORRECTO!
    • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
    • disabled
    • disabled
    • disabled
    • ¡VAMOS $P!

    Quiz,5, T:Q2

    Tabla del 3

    $3

    01:30

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    PASAR

    true

    1. &100 $v1[1,9] x 3
      1. eval{$v1* 3}

    ¡ Genial $J1:"§nom§" !

    $1

    ¡Debes repasar estos intervalos!

    $2

    PER

    Inicio

    $TXT QUIZ$ Texto del enunciado

    Intentar de nuevo
    • ¡BUENA SUERTE!
    • ¡NO ES CORRECTO!
    • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
    • disabled
    • disabled
    • disabled
    • ¡VAMOS $P!

    $TXT FEEDBACK$

    Quiz,5, T:Q3

    Tabla del 4

    $3

    01:30

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    PASAR

    true

    1. &100 $v1[1,9] x 4
      1. eval{$v1* 4}

    ¡Debes repasar estos intervalos!

    $2

    ¡ Genial !

    $1

    Inicio

    $TXT QUIZ$ Texto del enunciado

    PER

    Intentar de nuevo
    • ¡BUENA SUERTE!
    • ¡NO ES CORRECTO!
    • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
    • disabled
    • disabled
    • disabled
    • ¡VAMOS $P!

    $TXT FEEDBACK$

    Quiz,5, T:Q4

    Tabla del 5

    $3

    01:30

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    PASAR

    true

    PER

    1. &100 $v1[1,9] x 5
      1. eval{$v1* 5}

    ¡Debes repasar estos intervalos!

    $2

    ¡ Genial $J1:"§nom§" !

    $1

    Inicio

    $TXT QUIZ$ Texto del enunciado

    Intentar de nuevo

    $TXT FEEDBACK$

    • ¡BUENA SUERTE!
    • ¡NO ES CORRECTO!
    • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
    • disabled
    • disabled
    • disabled
    • ¡VAMOS $P!

    Quiz,5, T:Q5

    Tabla del 6

    $3

    01:30

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    PASAR

    true

    1. &100 $v1[1,9] x 6
      1. eval{$v1* 6}

    ¡Debes repasar estos intervalos!

    $2

    ¡ Genial $J1:"§nom§" !

    $1

    Inicio

    $TXT QUIZ$ Texto del enunciado

    PER

    Intentar de nuevo

    $TXT FEEDBACK$

    • ¡BUENA SUERTE!
    • ¡NO ES CORRECTO!
    • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
    • disabled
    • disabled
    • disabled
    • ¡VAMOS $P!

    Quiz,5, T:Q6

    Tabla del 7

    $3

    01:30

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    PASAR

    true

    1. &100 $v1[11,99] + $v2[1,9]
      1. eval{$v1+$v2}
    2. &100 $v3[1,9] + $v4[11,99]
      1. eval{$v3+$v4}

      ¡Debes repasar estos intervalos!

      $2

      ¡ Genial $J1:"§nom§" !

      $1

      Inicio

      PER

      $TXT QUIZ$ Texto del enunciado

      Intentar de nuevo
      1. &100 $v1[1,9] x 7
        1. eval{$v1* 7}

      $TXT FEEDBACK$

      • ¡BUENA SUERTE!
      • ¡NO ES CORRECTO!
      • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
      • disabled
      • disabled
      • disabled
      • ¡VAMOS $P!

      Quiz,5, T:Q7

      Tabla del 8

      $3

      01:30

      $HITS1

      $J1:"§nom§"

      $J1:"§nom§"

      $SCORE1

      PASAR

      true

      1. &100 $v1[1,9] x 8
        1. eval{$v1* 8}

      ¡Debes repasar estos intervalos!

      $2

      ¡ Genial $J1:"§nom§" !

      $1

      PER

      Inicio

      $TXT QUIZ$ Texto del enunciado

      Intentar de nuevo

      $TXT FEEDBACK$

      • ¡BUENA SUERTE!
      • ¡NO ES CORRECTO!
      • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
      • disabled
      • disabled
      • disabled
      • ¡VAMOS $P!

      Quiz,5, T:Q8

      Tabla del 9

      $3

      01:30

      $HITS1

      $J1:"§nom§"

      $J1:"§nom§"

      $SCORE1

      PASAR

      true

      1. &100 $v1[1,9] x 9
        1. eval{$v1* 9}

      ¡Debes repasar estos intervalos!

      $2

      ¡ Genial $J1:"§nom§" !

      $1

      Inicio

      $TXT QUIZ$ Texto del enunciado

      PER

      Intentar de nuevo

      $TXT FEEDBACK$

      • ¡BUENA SUERTE!
      • ¡NO ES CORRECTO!
      • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
      • disabled
      • disabled
      • disabled
      • ¡VAMOS $P!

      Quiz,5, T:Q9

      Tabla del 10

      $3

      01:30

      $HITS1

      $J1:"§nom§"

      $J1:"§nom§"

      $SCORE1

      PASAR

      true

      1. &100 $v1[1,9] x 10
        1. eval{$v1* 10}

      ¡Debes repasar estos intervalos!

      $2

      ¡ Genial $J1:"§nom§" !

      $1

      $TXT QUIZ$ Texto del enunciado

      Inicio

      PER

      Intentar de nuevo

      $TXT FEEDBACK$

      • ¡BUENA SUERTE!
      • ¡NO ES CORRECTO!
      • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
      • disabled
      • disabled
      • disabled
      • ¡VAMOS $P!

      Quiz,5, T:Q10

      Todas las tablas

      $3

      01:30

      $HITS1

      $J1:"§nom§"

      $J1:"§nom§"

      $SCORE1

      PASAR

      true

      1. &100 $v1[1,9] x $v2[1,9]
        1. eval{$v1* $v2}

      ¡ Genial $J1:"§nom§" !

      $1

      ¡Debes repasar estos intervalos!

      $2

      PER

      Inicio

      $TXT QUIZ$ Texto del enunciado

      1. &100 $v1[111,999] + $v2[10/20/30/40/50/60/70/80/90]
        1. eval{$v1+$v2}
        Intentar de nuevo

        $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%

        ¡Enhorabuena! Has conseguido superar todos los desafíos.

        !!Eres el Rey o Reina de los Intervalos!!