Want to make creations as awesome as this one?

Practica las Fases de la suma del ABN con este juego de cálculo mental.

Transcript

Reutilizar

Las imágenes de este juego son propiedad de Super Cell y se utilizan con caracter educativo, nunca con ánimo de lucho.

  1. 12

  • 900
  • 80
  • 10
  • 900

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

Una épica batalla está a punto de comenzar.

  • 900
  • 80
  • 10
  • 900

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

Desmuestra tu habilidad con el cálculo mental.

  • 900
  • 80
  • 10
  • 900

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

Consigue recompensas en cada desafio.

  • 900
  • 80
  • 10
  • 900

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

¡ y derrota al Rey Rojo !

  • 900
  • 80
  • 10
  • 900

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

En cada Arena puedes utilizar algunos de estos objetos.

Tiempo extra +15 "

Tiempo extra +30 "

Tiempo extra +60 "

Pasar pregunta

Escribe tu nombre

Elige tu campeón de batalla

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

§nom§

§nom§

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

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

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

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

$3

i

i

§nom§

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

§nom§

$3

Fase 1

Fase 2

Fase 3

Fase 4

Fase 5

Fase 6

Fase 7

Fase 8

Fase 9

Fase 10

Fase 11

Fase 12

SUMAS ABN Fase 1. Sumas con combinaciones básicas hasta el 10

SUMAS ABN Fase 2.4. Sumas de 3 dígitos rebasando decena en las dos combinaciones.

SUMAS ABN Fase 3. Sumas de decenas completas más dígitos.

SUMAS ABN Fase 4. Sumas de decenas completas: extensión de la tabla de sumar.

SUMAS ABN Fase 5. Sumas de decenas completas más decenas incompletas.

SUMAS ABN Fase 6. Sumas de decenas incompletas más digitos

SUMAS ABN Fase 7. Suma de decenas incompletas mas decenas incompletas.

SUMAS ABN Fase 1. Sumas de decenas completas mas decenas completas mas unidades.

SUMAS ABN Fase 9. Suma de centenas incompletas mas unidades.

SUMAS ABN Fase 1. Sumas de centenas incompletas mas decenas completas.

SUMAS ABN Fase 11. Sumas de centenas incompletas mas decenas incompletas.

SUMAS ABN Fase 12. Sumas de centenas incompletas mas centenas incompletas.

§nom§

§nom§

¡Aquí tienes tu progreso, §nom§!

$3

$Q1:SP

$Q2:SP

$Q1:SH

$Q2:SH

$Q4:SP

$Q5:SP

$Q6:SP

$Q4:SH

$Q7:SP

$Q5:SH

$Q8:SP

$Q9:SP

$Q6:SH

$Q10:SP

$Q7:SH

$Q11:SP

$Q8:SH

$Q12:SP

$Q9:SH

$Q10:SH

$Q11:SH

$Q12:SH

$Q3:SP

$Q3:SH

01:00

PER

$TXT FEEDBACK$

quiz, 5, T:Q1

¡ Genial !

$1

01:00

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

Fase 1

true

$J1:"§nom§"

$SCORE1

$TXT QUIZ$ Texto del enunciado

Reinicia

$J1:"§nom§"

$HITS1

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

Volver

30

Algo salió mal

$3

$2

$Q1:SP

$Q1:SH

Recompensa

§eval{$Q1:SH <= 2}§:true

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

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

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

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

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

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

  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}

PER

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

Fase 2

$TXT FEEDBACK$

01:00

$J1:"§nom§"

$SCORE1

$J1:"§nom§"

$HITS1

true

$TXT QUIZ$ Texto del enunciado

Reinicia

¡ Genial !

$1

quiz, 5, T:Q2

Volver

Algo salió mal

$3

$2

00:30

00:15

01:00

§eval{$Q2:SH <= 2}§:true

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

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

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

$Q2:SP

$Q2:SH

Recompensa

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

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

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

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

PER

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

Fase 3

$TXT FEEDBACK$

$J1:"§nom§"

$SCORE1

$J1:"§nom§"

01:00

$HITS1

true

$TXT QUIZ$ Texto del enunciado

Reinicia

¡ Genial !

$1

quiz, 5, T:Q3

00:15

Volver

01:00

00:30

Algo salió mal

$3

$2

§eval{$Q3:SH <= 2}§:true

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

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

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

$Q3:SP

$Q3:SH

Recompensa

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

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

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

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

PER

  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

$TXT FEEDBACK$

$J1:"§nom§"

$SCORE1

$J1:"§nom§"

02:00

$HITS1

¡ Genial !

true

$TXT QUIZ$ Texto del enunciado

$1

Reinicia

quiz, 5, T:Q4

00:30

01:00

00:15

Volver

Algo salió mal

$3

$2

§eval{$Q4:SH <= 2}§:true

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

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

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

$Q4:SP

$Q4:SH

Recompensa

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

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

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

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

PER

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

Fase 5

$TXT FEEDBACK$

$J1:"§nom§"

$SCORE1

$J1:"§nom§"

02:00

$HITS1

¡ Genial !

true

$TXT QUIZ$ Texto del enunciado

$1

Reinicia

quiz, 5, T:Q5

00:30

01:00

00:15

Volver

Algo salió mal

$3

$2

§eval{$Q5:SH <= 2}§:true

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

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

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

$Q5:SP

$Q5:SH

Recompensa

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

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

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

PER

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

02:00

Fase 6

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

    true

    $TXT QUIZ$ Texto del enunciado

    $TXT FEEDBACK$

    $J1:"§nom§"

    Reinicia

    $SCORE1

    $J1:"§nom§"

    $HITS1

    ¡ Genial !

    $1

    Volver

    quiz, 5, T:Q6

    Algo salió mal

    $3

    $2

    00:30

    01:00

    00:15

    §eval{$Q6:SH <= 2}§:true

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

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

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

    $Q6:SP

    $Q6:SH

    Recompensa

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

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

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

    PER

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

    03:00

    Fase 7

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

      true

      $TXT QUIZ$ Texto del enunciado

      $TXT FEEDBACK$

      $J1:"§nom§"

      Reinicia

      $SCORE1

      $J1:"§nom§"

      $HITS1

      ¡ Genial !

      $1

      Volver

      quiz, 5, T:Q7

      Algo salió mal

      $3

      00:30

      01:00

      $2

      00:15

      §eval{$Q7:SH <= 2}§:true

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

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

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

      $Q7:SP

      $Q7:SH

      Recompensa

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

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

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

      PER

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

      03:00

      Fase 8

      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}

        true

        $TXT QUIZ$ Texto del enunciado

        $TXT FEEDBACK$

        Reinicia

        $J1:"§nom§"

        $SCORE1

        $J1:"§nom§"

        $HITS1

        ¡ Genial !

        $1

        Volver

        quiz, 5, T:Q8

        Algo salió mal

        $3

        $2

        00:30

        01:00

        00:15

        §eval{$Q8:SH <= 2}§:true

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

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

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

        $Q8:SP

        $Q8:SH

        Recompensa

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

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

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

        PER

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

        03:30

        Fase 9

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

          true

          $TXT QUIZ$ Texto del enunciado

          $TXT FEEDBACK$

          Reinicia

          $J1:"§nom§"

          $SCORE1

          $J1:"§nom§"

          $HITS1

          ¡ Genial !

          $1

          Volver

          quiz, 5, T:Q9

          Algo salió mal

          $3

          00:30

          $2

          01:00

          00:15

          §eval{$Q9:SH <= 2}§:true

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

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

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

          $Q9:SP

          $Q9:SH

          Recompensa

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

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

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

          PER

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

          03:30

          Fase 10

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

            true

            $TXT QUIZ$ Texto del enunciado

            $TXT FEEDBACK$

            Reinicia

            $J1:"§nom§"

            $SCORE1

            $J1:"§nom§"

            $HITS1

            ¡ Genial !

            $1

            Volver

            quiz, 5, T:Q10

            Algo salió mal

            $3

            00:30

            01:00

            00:15

            $2

            §eval{$Q10:SH <= 2}§:true

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

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

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

            $Q10:SP

            $Q10:SH

            Recompensa

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

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

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

            §

            PER

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

            04:00

            Fase 11

            1. &100 $v1[111,999] + $v2[11,99]
              1. eval{$v1+$v2}

              true

              $TXT QUIZ$ Texto del enunciado

              $TXT FEEDBACK$

              Reinicia

              $J1:"§nom§"

              $SCORE1

              $J1:"§nom§"

              $HITS1

              ¡ Genial !

              $1

              Volver

              quiz, 5, T:Q11

              Algo salió mal

              $3

              00:30

              01:00

              $2

              00:15

              §eval{$Q11:SH <= 2}§:true

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

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

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

              $Q11:SP

              $Q11:SH

              Recompensa

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

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

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

              PER

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

              04:00

              Fase 12

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

                true

                $TXT QUIZ$ Texto del enunciado

                $TXT FEEDBACK$

                Reinicia

                $J1:"§nom§"

                $SCORE1

                $J1:"§nom§"

                $HITS1

                ¡ Genial !

                $1

                Volver

                quiz, 5, T:Q12

                Algo salió mal

                00:30

                $3

                01:00

                00:15

                $2

                §eval{$Q12:SH <= 2}§:true

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

                $Q12:SP

                $Q12:SH

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

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

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

                §

                • 900
                • 80
                • 10
                • 900

                ¡Eres un autentico maestro del cálculo mental!

                ¡Enhorabuena!Has conseguido superar todos los desafios.

                Elemento obligatorio en la primera página que se debe agrupar con un botón de continuar.

                Coloca este elemento en la página del GICODE. Puedes cambiar el formato de la fuente.El texto (opcional) se reemplazará con el código final obtenido

                Barras de progreso

                Elemento obligatorio. Se debe poner en una página por la que obligatoriamente pasen al principio. Por ejemplo, la de introducción.

                Coloca este elemento en una página para borrar los datos de partida.

                Juego completado. Opcional. Puede usarse si no se implementa un candado. Coloca este objeto en una página donde quieras que el juego se de por terminado.

                Elige el modelo que más se adapte a la estética de tu Breakout

                Página de creación

                1. 5 indica el número de retos. Si escribes un valor de más de 2 cifras lo asumirá como clave predefinida, con tantos retos como dígitos tenga el número introducido
                2. [1-5] indica el rango de valores posibles para la clave. Opcional, si no se incluye se considerará [0-9].
                3. color añade un color asociado a cada dígito. Opcional.
                4. Son los colores que asociaremos a la clave. (Ej: #FF0000). Es algo opcional y puede no incluirse.
                5. no-repeat hace que los dígitos/imágenes/colores de la contraseña no se repitan

                1. 5
                2. [1-5]
                3. color
                4. #FF9900, #FAF700, #00CC00, #FF0000, #6633FF
                5. no-repeat

                Dígitos. Número conseguido al superar un reto

                Página de creación

                Agrupar con un texto. Colocarla en la última página del reto, al conseguir la recompensa de ese reto

                Recompensas

                Agrupar con #. Saldrá el dígito de la contraseña conseguido de cada reto.Agrupar con imagen o texto de recompensa. Aparecerá la imagen y/o texto del reto conseguido.Agrupar con imagen de feedback de reto conseguido. Se puede poner encima del mapa para marcar retos conseguidos e incluso impedir que se repitan.

                Agrupar con imageno cualquier elemento Genially.Aparece cuando se haya conseguido la recompensa final del itinerario.

                Candados

                Agrupar con imagen o cualquier elemento Genially. Los candados hacen visible un elemento hasta que se completen las misiones anteriores, después se ocultará. Agrupado a un elemento que cubra el enlace a la misión correspondiente, por ejemplo, impedirá realizar dicha misión hasta completar las anteriores.

                Candado boss.Agrupar con imageno cualquier elemento Genially. para bloquear el enigma o candado final. Desaparecerá al conseguir todos los retos.

                OFF

                Agrupar con imagen o cualquier elemento Genially.Se ocultará cuando consigas una misión.

                OFF Boss.Agrupar con imagen o cualquier elemento Genially. Desaparece cuando se haya conseguido la recompensa final

                [3]

                [3]

                Otorga la recompensa que indica al hacer click.

                Página de creación para código de colores

                Agrupar con cualquier elemento Genially para hacerlo visible y clicable.

                Recompensas

                RETOMAR LA PARTIDA

                Alto

                Ancho

                Taille bordure

                Couleur bordure

                Couleur fond

                Couleur police

                Taille police

                Style bordure

                Nom police

                AbeeZee

                Abel

                Abhaya Libre

                AbeeZee

                Aclonica

                AbeeZee

                Actor

                Petit rappel, il faudra que la police soit présente sur la page ou vous mettrez vos boîtes pour qu'elle soit prise en compte

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

                Aperçu boîte personnalisée

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

                Opacité fond

                Nom variable

                INPUTCREATOR

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

                <div class="css-progressBarGen" style="width: 100%; height: 100%; padding: 0px; border-color: rgb(140, 140, 140); border-width: 1px; border-style: solid; background-color: rgb(245, 245, 245); border-radius: 100px; backdrop-filter: blur(0px); transform: scaleY(1); overflow: hidden;"><div style="height: 100%; width: 80%; padding: 0px; margin: 0px; border-width: 0px; border-radius: 100px; backdrop-filter: blur(0px); box-shadow: rgba(102, 102, 102, 0.3) 4.1px 1.00421e-15px 14.9px 4.1px; background-image: linear-gradient(0deg, rgb(252, 200, 70) 0%, rgb(252, 200, 70) 71%);" data-ref="progressBar" orientation="horizontal" data-value="0"></div></div><script> if (document.querySelector('.container-wrapper-genially')) { var progress = document.querySelectorAll("div[data-ref=progressBar]"); for (var i = 0; i < progress.length && !progress[i].getAttribute('data-init'); i++) { var url = window.location.pathname.split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { var referencia = url[y]; found = true; } } var textosAdjuntos = progress[i].closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) {} else if (texto.innerText.trim().substring(0, 3) == 'htt') { url = texto.innerText.trim().split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { referencia = url[y]; found = true; } } texto.style.display = 'none' } } var claveCadena = localStorage.getItem('claveGenerada' + referencia); actualizaBarra(claveCadena, progress[i]); progress[i].setAttribute('data-init', true); } } function actualizaBarra(claveCadena, barra) { var progress = barra; let grupo = progress.closest('div.genially-animated-wrapper'); var txtBarra = getTexte(progress); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = 0 + "%"; progress.setAttribute('data-value', 0); } else { progress.style.width = 0 + "%"; progress.setAttribute('data-value', 0); } if (txtBarra) { txtBarra.innerText = 0 + "%" }; if (claveCadena) { var found = (claveCadena.match(/true/gi) ? claveCadena.match(/true/gi).length : 0), notFound = (claveCadena.match(/false/gi) ? claveCadena.match(/false/gi).length : 0); var avance = Math.max(((found - 1)/(notFound + found) * 100), 0); var value = parseInt(progress.getAttribute('data-value')); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = avance + "%"; progress.setAttribute('data-value', avance); } else { progress.style.width = avance + "%"; progress.setAttribute('data-value', avance); } console.log("actualizando la barra con digito"); let idInterval = setInterval(function () { value = parseInt(progress.getAttribute('data-value')); var range; if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else { range = 80; } if (value >= (found/(notFound + found) * 100) - 1) { clearInterval(idInterval); value = (found/(notFound + found) * 100); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%" }; } else { value++; if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%"; } } }, 100); } } function getTexte(progress) { var textosAdjuntos = progress.closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) { var lastElementChild = texto; while (lastElementChild.firstChild) { lastElementChild = lastElementChild.firstChild; } return lastElementChild.parentNode; } } } </script>

                <style> .progressCh { padding: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); } .progress-barCh { height: 16px; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); } /* * Note: using adjacent or general sibling selectors combined with * pseudo classes doesn't work in Safari 5.0 and Chrome 12. * See this article for more info and a potential fix: * https://css-tricks.com/webkit-sibling-bug/ */ .progressCh > .progress-barCh[data-range="0"] { background-color: #f63a0f; } .progressCh > .progress-barCh[data-range="20"] { background-color: #f27011; } .progressCh > .progress-barCh[data-range="40"] { background-color: #f2b01e; } .progressCh > .progress-barCh[data-range="60"] { background-color: #f2d31b; } .progressCh > .progress-barCh[data-range="80"] { background-color: #86e01e; } .progressCh > .progress-barCh[data-range="100"] { -webkit-animation: gradientAnimation 5s alternate infinite linear; -moz-animation: gradientAnimation 5s alternate infinite linear; animation: gradientAnimation 5s alternate infinite linear; } @-webkit-keyframes gradientAnimation { 0%{background-color: #86e01e;} 20%{background-color: #86e01e;} 40%{background-color: #f2d31b;} 60%{background-color: #f2b01e;} 80%{background-color: #f27011;} 100%{background-color: #f63a0f;} } @-moz-keyframes gradientAnimation { 0%{background-color: #86e01e;} 20%{background-color: #86e01e;} 40%{background-color: #f2d31b;} 60%{background-color: #f2b01e;} 80%{background-color: #f27011;} 100%{background-color: #f63a0f;} } @keyframes gradientAnimation { 0%{background-color: #86e01e;} 20%{background-color: #86e01e;} 40%{background-color: #f2d31b;} 60%{background-color: #f2b01e;} 80%{background-color: #f27011;} 100%{background-color: #f63a0f;} } </style> <div class="progressCh" style="width: 100%; height: 100%; padding: 0px; border-color: rgb(0, 0, 0); border-width: 1px; border-style: solid; background-color: rgba(245, 245, 245, 0.74); border-radius: 5px; backdrop-filter: blur(0.3px); transform: scaleY(1); overflow: hidden;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);"><div style="height: 0%; width: 0%; padding: 0px; margin: 0px; border-width: 0px; border-radius: 5px; backdrop-filter: blur(0.3px); box-shadow: rgba(102, 102, 102, 0.79) -1.10218e-15px 6px 8.3px 6px;" data-ref="progressBar" class="progress-barCh" orientation="vertical" data-value="0" data-range="0"> </div></div> <script> if (document.querySelector('.container-wrapper-genially')) { var progress = document.querySelectorAll("div[data-ref=progressBar]"); for (var i = 0; i < progress.length && !progress[i].getAttribute('data-init'); i++) { if (progress[i].getAttribute('orientation') == 'vertical') { progress[i].style.height = 0 + "%"; progress[i].style['-webkit-transition-property'] = "background-color, height"; progress[i].style['-moz-transition-property'] = "background-color, height"; progress[i].style['-o-transition-property'] = "background-color, height"; progress[i].style['transition-property'] = "background-color, height"; progress[i].parentNode.style.webkitTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.mozTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.msTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.oTransform = 'rotateX('+180+'deg)'; progress[i].parentNode.style.transform = 'rotateX('+180+'deg)'; progress[i].style.webkitTransform = 'rotateX('+180+'deg)'; progress[i].style.mozTransform = 'rotateX('+180+'deg)'; progress[i].style.msTransform = 'rotateX('+180+'deg)'; progress[i].style.oTransform = 'rotateX('+180+'deg)'; progress[i].style.transform = 'rotateX('+180+'deg)'; progress[i].style.width = 100 + "%"; } else { progress[i].style.height = 100 + "%"; } var url = window.location.pathname.split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { var referencia = url[y]; found = true; } } var textosAdjuntos = progress[i].closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) {} else if (texto.innerText.trim().substring(0, 3) == 'htt') { url = texto.innerText.trim().split("/"); var found = false; var conNumero = /\d/; for (var y = 0; y < url.length && !found; y++) { if (conNumero.test(url[y])) { referencia = url[y]; found = true; } } texto.style.display = 'none' } } var claveCadena = localStorage.getItem('claveGenerada' + referencia); actualizaBarra(claveCadena, progress[i]); progress[i].setAttribute('data-init', true); } } function actualizaBarra(claveCadena, barra) { var progress = barra; let grupo = progress.closest('div.genially-animated-wrapper'); var txtBarra = getTexte(progress); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = 0 + "%"; progress.setAttribute('data-value', 0); } else { progress.style.width = 0 + "%"; progress.setAttribute('data-value', 0); } if (txtBarra) { txtBarra.innerText = 0 + "%" }; if (claveCadena) { var found = (claveCadena.match(/true/gi) ? claveCadena.match(/true/gi).length : 0), notFound = (claveCadena.match(/false/gi) ? claveCadena.match(/false/gi).length : 0); var avance = Math.max(((found - 1)/(notFound + found) * 100), 0); var value = parseInt(progress.getAttribute('data-value')); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = avance + "%"; progress.setAttribute('data-value', avance); } else { progress.style.width = avance + "%"; progress.setAttribute('data-value', avance); } console.log("actualizando la barra con digito"); let idInterval = setInterval(function () { value = parseInt(progress.getAttribute('data-value')); var range; if (value >= (found/(notFound + found) * 100) - 1) { clearInterval(idInterval); value = (found/(notFound + found) * 100); if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else if (value < 100){ range = 80; } else if (value == 100){ range = 100; } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%" }; } else { value++; if (progress.getAttribute('orientation') == 'vertical') { progress.style.height = value + "%"; progress.setAttribute('data-value', value); } else { progress.style.width = value + "%"; progress.setAttribute('data-value', value); } if(value < 20){ range = 0; } else if (value < 40){ range = 20; } else if (value < 60){ range = 40; } else if (value < 80){ range = 60; } else if (value < 100){ range = 80; } else if (value == 100){ range = 100; } progress.setAttribute('data-range', range); if (txtBarra) { txtBarra.innerText = Math.ceil(parseFloat(value)) + "%"; } } }, 100); } } function getTexte(progress) { var textosAdjuntos = progress.closest('div.genially-animated-wrapper').querySelectorAll('.genially-view-text'); for (var k = 0; k < textosAdjuntos.length; k++) { var texto = textosAdjuntos[k]; var porcentaje = /^[0-9]+\%$/; if (porcentaje.test(texto.innerText.trim())) { var lastElementChild = texto; while (lastElementChild.firstChild) { lastElementChild = lastElementChild.firstChild; } return lastElementChild.parentNode; } } } </script>

                Reemplaza el texto en negrita por los colores que quieras. También opta por horizontal o vertical. Luego, copia todo el texto e insértalo en tu itinerario

                Barras de progreso que cambian de color

                Cambia de color según %

                80%

                80%