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:

Essential Course

Smart Quiz

Dynamic Learning Course

Smart Presentation

Visual Presentation

Challenge: World History

Movie Classics in Emojis

Explore all templates

Transcript

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.

Las imágenes del juego Clash Royale pertencen a Supercell

Todas las imágenes utilizadas están registradas bajo licencia de uso de Freepik

Créditos

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).

  • Quiz Flexible
  • Typewriter + VAR + Gradebook
Desarrollo
Diseño
Descripción
Extensiones
https://view.genial.ly/65a2c87754a170001489af93

Una épica batalla está a punto de comenzar.

  • 900
  • 80
  • 10
  • 900
  1. 12

Desmuestra tu habilidad con los intervalos musicales.

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

  • 900
  • 80
  • 10
  • 900

Acierta al menos 5 intervalos en cada nivel, avanza por las diferentes arenas y ...

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

  • 900
  • 80
  • 10
  • 900

¡conviértete en el Rey o Reina de los Intervalos!

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

  • 900
  • 80
  • 10
  • 900

§nom§: *3

Elige tu campeón de batalla

Escribe tu nombre

nom,group

$3

§nom§

§nom§

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

VER PUNTUACIONES

VER INSTRUCCIONES

¡NIVEL DESBLOQUEADO!

$3

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

¡NIVEL DESBLOQUEADO!

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

¡NIVEL DESBLOQUEADO!

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

¡NIVEL DESBLOQUEADO!

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

¡NIVEL DESBLOQUEADO!

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

¡NIVEL DESBLOQUEADO!

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

¡NIVEL DESBLOQUEADO!

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

¡NIVEL DESBLOQUEADO!

¡NIVEL DESBLOQUEADO!

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

¡NIVEL DESBLOQUEADO!

§nom§

§nom§

VER PUNTUACIONES

VER INSTRUCCIONES

$3

§nom§

¡NIVEL DESBLOQUEADO!

§nom§

Sitúate sobre una Arena para ver las instrucciones

JUGAR

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

$3

§nom§

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

§nom§

SEGUIR JUGANDO

Sitúate sobre una Arena para ver las instrucciones

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

$3

§nom§

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

§nom§

¡¡ META !!

SEGUIR JUGANDO

$Q10:SH
$Q10:SP
$Q9:SH
$Q9:SP
$Q8:SH
$Q8:SP
$Q7:SH
$Q7:SP
$Q6:SH
$Q6:SP
$Q5:SH
$Q5:SP
$Q4:SH
$Q4:SP
$Q3:SH
$Q3:SP
$Q2:SH
$Q2:SP

$3

¡Aquí tienes tu progreso, §nom§!

§nom§

§nom§

PASAR

Quiz,5, T:Q1

$2

$3

¡Debes repasar estos intervalos!

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

$TXT QUIZ$ Texto del enunciado

true

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

01:30

$1

¡ Genial $J1:"§nom§" !

$TXT FEEDBACK$

30

Inicio
Intentar de nuevo
$HITS1

$J1:"§nom§"

$SCORE1

PER

$J1:"§nom§"

Tabla del 2

Quiz,5, T:Q10

$1

¡ Genial $J1:"§nom§" !

$2

Inicio

PASAR

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

$3

¡Debes repasar estos intervalos!

Intentar de nuevo
$HITS1

$J1:"§nom§"

$SCORE1

$J1:"§nom§"

$TXT FEEDBACK$

$TXT QUIZ$ Texto del enunciado

true

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

    Todas las tablas

    01:30

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

    PER

    PASAR

    Quiz,5, T:Q2

    $1

    ¡ Genial $J1:"§nom§" !

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

    $2

    $3

    ¡Debes repasar estos intervalos!

    Intentar de nuevo

    $TXT QUIZ$ Texto del enunciado

    true

    $HITS1

    $J1:"§nom§"

    $SCORE1

    $J1:"§nom§"

    01:30

    $TXT FEEDBACK$

    Tabla del 3

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

    PER

    Quiz,5, T:Q3

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

    $2

    PASAR

    $3

    ¡Debes repasar estos intervalos!

    Inicio

    $1

    ¡ Genial !

    Intentar de nuevo

    $TXT QUIZ$ Texto del enunciado

    true

    $HITS1

    01:30

    $J1:"§nom§"

    $SCORE1

    $J1:"§nom§"

    $TXT FEEDBACK$

    Tabla del 4

    PER

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

    Quiz,5, T:Q4

    $1

    ¡ Genial $J1:"§nom§" !

    Inicio

    $2

    PASAR

    $3

    ¡Debes repasar estos intervalos!

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

    $TXT QUIZ$ Texto del enunciado

    true

    $HITS1

    01:30

    $J1:"§nom§"

    $SCORE1

    $J1:"§nom§"

    $TXT FEEDBACK$

    Tabla del 5

    PER

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

    Quiz,5, T:Q5

    $1

    ¡ Genial $J1:"§nom§" !

    $2

    Inicio

    PASAR

    $3

    ¡Debes repasar estos intervalos!

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

    $TXT QUIZ$ Texto del enunciado

    true

    $HITS1

    01:30

    $J1:"§nom§"

    $SCORE1

    $J1:"§nom§"

    $TXT FEEDBACK$

    Tabla del 6

    PER

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

    Quiz,5, T:Q6

    $1

    ¡ Genial $J1:"§nom§" !

    $2

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

    PASAR

    $3

    ¡Debes repasar estos intervalos!

    Intentar de nuevo
    $HITS1

    $J1:"§nom§"

    $SCORE1

    $J1:"§nom§"

    $TXT FEEDBACK$

    $TXT QUIZ$ Texto del enunciado

    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}

      Tabla del 7

      01:30

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

      PER

      Quiz,5, T:Q7

      $1

      ¡ Genial $J1:"§nom§" !

      Inicio

      PASAR

      $2

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

      $3

      ¡Debes repasar estos intervalos!

      Intentar de nuevo
      $HITS1

      $J1:"§nom§"

      $SCORE1

      $J1:"§nom§"

      $TXT FEEDBACK$

      $TXT QUIZ$ Texto del enunciado

      true

      Tabla del 8

      01:30

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

      PER

      Quiz,5, T:Q8

      $1

      ¡ Genial $J1:"§nom§" !

      Inicio

      PASAR

      $2

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

      $3

      ¡Debes repasar estos intervalos!

      Intentar de nuevo
      $HITS1

      $J1:"§nom§"

      $SCORE1

      $J1:"§nom§"

      $TXT FEEDBACK$

      $TXT QUIZ$ Texto del enunciado

      true

      Tabla del 9

      01:30

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

      PER

      Quiz,5, T:Q9

      $1

      ¡ Genial $J1:"§nom§" !

      Inicio

      $2

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

      PASAR

      $3

      ¡Debes repasar estos intervalos!

      Intentar de nuevo
      $HITS1

      $J1:"§nom§"

      $SCORE1

      $J1:"§nom§"

      $TXT FEEDBACK$

      $TXT QUIZ$ Texto del enunciado

      true

      Tabla del 10

      01:30

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

      PER

      Quiz,5, T:Q10

      $1

      ¡ Genial $J1:"§nom§" !

      $2

      Inicio

      PASAR

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

      $3

      ¡Debes repasar estos intervalos!

      Intentar de nuevo
      $HITS1

      $J1:"§nom§"

      $SCORE1

      $J1:"§nom§"

      $TXT FEEDBACK$

      $TXT QUIZ$ Texto del enunciado

      true

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

        Todas las tablas

        01:30

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

        PER

        INPUTCREATOR

        Nom variable

        Opacité fond

        Se mettre en mode prévisualisation pour changer les paramètres

        Aperçu boîte personnalisée

        Texte à copier puis entrer dans "insérer , </> Autres" sous genially pour obtenir des boîtes compatibles avec l'extension présentant votre aspect personnalisé

        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

        Actor

        AbeeZee

        Aclonica

        AbeeZee

        Abhaya Libre

        Abel

        AbeeZee

        Nom police

        Style bordure

        Taille police

        Couleur police

        Couleur fond

        Couleur bordure

        Taille bordure

        Ancho

        Alto

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

        Reemplaza el texto en negrita por el código de tu barra. Luego, copia todo el texto e insértalo en tu itinerario

        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

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

        Cambia de color según %

        80%

        80%

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

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