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

Reuse this genially

Sumas

Ivan Calleja Navalpo

Created on August 17, 2022

Start designing with a free template

Discover more than 1500 professional designs like these:

Retro Bits Quiz

Products and Services Game

Dynamic Onboarding Game

Onboarding Quiz for New Employees

Work Style Quiz

Image Matching Game

Match Your Brand

Explore all templates

Transcript

Una épica batalla está a punto de comenzar en el Hilarión.

  • 900
  • 80
  • 10
  • 900
  1. 12

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.

  • 900
  • 80
  • 10
  • 900

Tiempo extra +60 "

Tiempo extra +15 "

Tiempo extra +30 "

Pasar pregunta

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

Elige tu campeón de batalla

Escribe tu nombre

$3

§nom§

§nom§

§eval{$Q2:SH >= 20}§:true
§eval{$Q1:SH >= 20}§:true
§eval{$Q2:SH < 10}§:true
§eval{$Q2:SH < 15}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q1:SH < 15}§:true
§eval{$Q3:SH >= 20}§:true
§eval{$Q4:SH >= 20}§:true
§eval{$Q6:SH >= 20}§:true
§eval{$Q5:SH >= 20}§:true
§eval{$Q3:SH < 10}§:true
§eval{$Q3:SH < 15}§:true
§eval{$Q4:SH < 10}§:true
§eval{$Q4:SH < 15}§:true
§eval{$Q6:SH < 10}§:true
§eval{$Q6:SH < 15}§:true
§eval{$Q5:SH < 10}§:true
§eval{$Q5:SH < 15}§:true
§eval{$Q7:SH >= 20}§:true
§eval{$Q8:SH >= 20}§:true
§eval{$Q10:SH >= 20}§:true
§eval{$Q11:SH >= 20}§:true
§eval{$Q7:SH < 10}§:true
§eval{$Q7:SH < 15}§:true
§eval{$Q9:SH >= 20}§:true
§eval{$Q8:SH < 10}§:true
§eval{$Q8:SH < 15}§:true
§eval{$Q1:SH < 10}§:true
§eval{$Q10:SH < 15}§:true
§eval{$Q11:SH < 10}§:true
§eval{$Q11:SH < 15}§:true
§eval{$Q9:SH < 10}§:true
§eval{$Q9:SH < 15}§:true
§eval{$Q12:SH >= 20}§:true
§eval{$Q12:SH < 10}§:true
§eval{$Q12:SH < 15}§:true

$3

§nom§

§nom§

Fase 6
Fase 3
Fase 4
Fase 5
Fase 2
Fase 1
Fase 12
Fase 8
Fase 11
Fase 10
Fase 7
Fase 9

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

¡Aquí tienes tu progreso, §nom§!

$3

§nom§

§nom§

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

30

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

Fase 1

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

$3

01:00

01:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

Algo salió mal

$2

¡ Genial !

$1

$TXT QUIZ$ Texto del enunciado

PER

quiz, 5, T:Q1

Volver
Reinicia

$TXT FEEDBACK$

§eval{$Q1:SH < 10}§:true

§eval{$Q1:SH < 15}§:true

§eval{$Q1:SH >= 20}§:true

$Q1:SP
$Q1:SH
Recompensa
§eval{$Q1:SH <= 2}§:true
§eval{$Q1:SH >= 20}§:true
§eval{$Q1:SH < 15}§:true
§eval{$Q1:SH < 10}§:true

Fase 2

  1. &100 $v1[0,9] + $v2[0,9] + $v3[1,9]
    1. eval{$v2+$v1+$v3}
  2. &100 $v1[1,9] + $v2[0,9] + $v3[0,9]
    1. eval{$v2+$v1+$v3}
  3. &100 $v1[0,9] + $v2[1,9] + $v3[0,9]
    1. eval{$v2+$v1+$v3}
  • ¡BUENA SUERTE!
  • ¡NO ES CORRECTO!
  • ¡MUY BIEN! | ESTUPENDO | ¡GRANDE!
  • disabled
  • disabled
  • disabled
  • ¡VAMOS $P!

$3

01:00

00:30

00:15

01:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

Algo salió mal

$2

¡ Genial !

$1

PER

$TXT QUIZ$ Texto del enunciado

quiz, 5, T:Q2

Volver
Reinicia

$TXT FEEDBACK$

§eval{$Q2:SH < 15}§:true

§eval{$Q2:SH >= 20}§:true

§eval{$Q2:SH < 10}§:true

$Q2:SP
$Q2:SH
Recompensa
§eval{$Q2:SH <= 2}§:true
§eval{$Q2:SH >= 20}§:true
§eval{$Q2:SH < 10}§:true
§eval{$Q2:SH < 15}§:true
  1. &100 $v1[10/20/30/40/50/60/70/80/90] + $v2[1,10]
    1. eval{$v1+$v2}

Fase 3

$3

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

01:00

00:30

00:15

01:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

¡ Genial !

$1

Algo salió mal

$2

quiz, 5, T:Q3

$TXT QUIZ$ Texto del enunciado

PER

Volver
Reinicia

$TXT FEEDBACK$

§eval{$Q3:SH < 10}§:true

§eval{$Q3:SH < 15}§:true

§eval{$Q3:SH >= 20}§:true

$Q3:SP
$Q3:SH
Recompensa
§eval{$Q3:SH <= 2}§:true
§eval{$Q3:SH >= 20}§:true
§eval{$Q3:SH < 10}§:true
§eval{$Q3:SH < 15}§:true
  1. &100 $v1[10/20/30/40/50/60/70/80/90] + $v2[10/20/30/40/50/60/70/80/90]
    1. eval{$v1+$v2}

Fase 4

$3

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

01:00

00:15

00:30

02:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

¡ Genial !

$1

Algo salió mal

$2

$TXT QUIZ$ Texto del enunciado

quiz, 5, T:Q4

PER

Volver
Reinicia

$TXT FEEDBACK$

§eval{$Q4:SH < 10}§:true

§eval{$Q4:SH < 15}§:true

§eval{$Q4:SH >= 20}§:true

$Q4:SP
$Q4:SH
Recompensa
§eval{$Q4:SH <= 2}§:true
§eval{$Q4:SH >= 20}§:true
§eval{$Q4:SH < 10}§:true
§eval{$Q4:SH < 15}§:true
  1. &100 $v1[10/20/30/40/50/60/70/80/90] + $v2[11,99]
    1. eval{$v1+$v2}

Fase 5

$3

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

00:15

00:30

01:00

02:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

¡ Genial !

$1

Algo salió mal

$2

quiz, 5, T:Q5

$TXT QUIZ$ Texto del enunciado

PER

Volver
Reinicia

$TXT FEEDBACK$

§eval{$Q5:SH < 10}§:true

§eval{$Q5:SH < 15}§:true

§eval{$Q5:SH >= 20}§:true

$Q5:SP
$Q5:SH
Recompensa
§eval{$Q5:SH <= 2}§:true
§eval{$Q5:SH >= 20}§:true
§eval{$Q5:SH < 10}§:true
§eval{$Q5:SH < 15}§: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}

    Fase 6

    $3

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

    00:30

    01:00

    00:15

    02:00

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    true

    ¡ Genial !

    $1

    quiz, 5, T:Q6

    Algo salió mal

    $2

    PER

    $TXT QUIZ$ Texto del enunciado

    Volver
    Reinicia

    $TXT FEEDBACK$

    §eval{$Q6:SH >= 20}§:true

    §eval{$Q6:SH < 15}§:true

    §eval{$Q6:SH < 10}§:true

    $Q6:SP
    $Q6:SH
    Recompensa
    §eval{$Q6:SH <= 2}§:true
    §eval{$Q6:SH >= 20}§:true
    §eval{$Q6:SH < 10}§:true
    §eval{$Q6:SH < 15}§:true
    1. &100 $v1[11,99] + $v2[11,99]
      1. eval{$v1+$v2}

      Fase 7

      $3

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

      00:30

      01:00

      00:15

      03:00

      $HITS1

      $J1:"§nom§"

      $J1:"§nom§"

      $SCORE1

      true

      ¡ Genial !

      $1

      Algo salió mal

      $2

      quiz, 5, T:Q7

      PER

      $TXT QUIZ$ Texto del enunciado

      Volver
      Reinicia

      $TXT FEEDBACK$

      §eval{$Q7:SH < 10}§:true

      §eval{$Q7:SH < 15}§:true

      §eval{$Q7:SH >= 20}§:true

      $Q7:SP
      $Q7:SH
      Recompensa
      §eval{$Q7:SH <= 2}§:true
      §eval{$Q7:SH >= 20}§:true
      §eval{$Q7:SH < 10}§:true
      §eval{$Q7:SH < 15}§:true
      1. &100 $v1[100/200/300/400/500/600/700/800/900] + $v2[10/20/30/40/50/60/70/80/90] + $v3[1,9]
        1. eval{$v1+$v2+$v3}

        Fase 8

        $3

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

        00:30

        01:00

        00:15

        03:00

        $HITS1

        $J1:"§nom§"

        $J1:"§nom§"

        $SCORE1

        true

        ¡ Genial !

        $1

        Algo salió mal

        $2

        quiz, 5, T:Q8

        $TXT QUIZ$ Texto del enunciado

        PER

        Volver
        Reinicia

        $TXT FEEDBACK$

        §eval{$Q8:SH < 10}§:true

        §eval{$Q8:SH >= 20}§:true

        §eval{$Q8:SH < 15}§:true

        $Q8:SP
        $Q8:SH
        Recompensa
        §eval{$Q8:SH <= 2}§:true
        §eval{$Q8:SH >= 20}§:true
        §eval{$Q8:SH < 10}§:true
        §eval{$Q8:SH < 15}§:true
        1. &100 $v1[111,999] + $v2[1,9]
          1. eval{$v1+$v2}

          Fase 9

          $3

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

          00:30

          01:00

          00:15

          03:30

          $HITS1

          $J1:"§nom§"

          $J1:"§nom§"

          $SCORE1

          true

          quiz, 5, T:Q9

          ¡ Genial !

          $1

          Algo salió mal

          $2

          $TXT QUIZ$ Texto del enunciado

          PER

          Volver
          Reinicia

          $TXT FEEDBACK$

          §eval{$Q9:SH < 10}§:true

          §eval{$Q9:SH < 15}§:true

          §eval{$Q9:SH >= 20}§:true

          $Q9:SP
          $Q9:SH
          Recompensa
          §eval{$Q9:SH <= 2}§:true
          §eval{$Q9:SH >= 20}§:true
          §eval{$Q9:SH < 10}§:true
          §eval{$Q9:SH < 15}§:true
          1. &100 $v1[111,999] + $v2[10/20/30/40/50/60/70/80/90]
            1. eval{$v1+$v2}

            Fase 10

            $3

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

            01:00

            00:30

            00:15

            03:30

            $HITS1

            $J1:"§nom§"

            $J1:"§nom§"

            $SCORE1

            true

            ¡ Genial !

            $1

            Algo salió mal

            $2

            quiz, 5, T:Q10

            $TXT QUIZ$ Texto del enunciado

            PER

            Volver
            Reinicia

            $TXT FEEDBACK$

            §eval{$Q10:SH < 10}§:true

            §eval{$Q10:SH < 15}§:true

            §eval{$Q10:SH >= 20}§:true

            $Q10:SP
            $Q10:SH
            Recompensa
            §eval{$Q10:SH <= 2}§:true
            §eval{$Q10:SH >= 20}§:true
            §eval{$Q1:SH < 10}§:true
            §eval{$Q10:SH < 15}§:true
            1. &100 $v1[111,999] + $v2[11,99]
              1. eval{$v1+$v2}

              Fase 11

              $3

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

              00:15

              01:00

              00:30

              04:00

              $HITS1

              $J1:"§nom§"

              $J1:"§nom§"

              $SCORE1

              true

              ¡ Genial !

              $1

              Algo salió mal

              $2

              quiz, 5, T:Q11

              $TXT QUIZ$ Texto del enunciado

              PER

              Volver
              Reinicia

              $TXT FEEDBACK$

              §eval{$Q11:SH < 10}§:true

              §eval{$Q11:SH < 15}§:true

              §eval{$Q11:SH >= 20}§:true

              $Q11:SP
              $Q11:SH
              Recompensa
              §eval{$Q11:SH <= 2}§:true
              §eval{$Q11:SH >= 20}§:true
              §eval{$Q11:SH < 10}§:true
              §eval{$Q11:SH < 15}§:true
              1. &100 $v1[111,999] + $v2[111,999]
                1. eval{$v1+$v2}

                Fase 12

                $3

                00:30

                01:00

                00:15

                04:00

                $HITS1

                $J1:"§nom§"

                $J1:"§nom§"

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

                true

                ¡ Genial !

                $1

                Algo salió mal

                $2

                quiz, 5, T:Q12

                $TXT QUIZ$ Texto del enunciado

                PER

                Volver
                Reinicia

                $TXT FEEDBACK$

                $Q12:SP
                $Q12:SH
                §eval{$Q12:SH <= 2}§:true
                §eval{$Q12:SH >= 20}§:true
                §eval{$Q12:SH < 10}§:true
                §eval{$Q12:SH < 15}§:true
                §eval{$Q1:SH >= 10}§:true

                ¡Enhorabuena! Has conseguido superar todos los desafios.

                • 900
                • 80
                • 10
                • 900

                ¡Eres un autentico maestro del cálculo mental!

                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%