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

Get started free

IM - Természetes számok 5.

Szász Laura

Created on May 1, 2023

Start designing with a free template

Discover more than 1500 professional designs like these:

Urban Illustrated Presentation

3D Corporate Reporting

Discover Your AI Assistant

Vision Board

SWOT Challenge: Classify Key Factors

Explainer Video: Keys to Effective Communication

Explainer Video: AI for Companies

Explore all templates

Transcript

FOLYTATÁS
ÚJ JÁTÉK

Egy matekos csata kezdődik.

  • 900
  • 80
  • 10
  • 900
  1. 12

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

Mutasd meg képességeidet pontos számítással.

  • 900
  • 80
  • 10
  • 900

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

Szerezz jutalmakat minden kihívásban.

  • 900
  • 80
  • 10
  • 900

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

Győzd le a Vörös Királyt!

  • 900
  • 80
  • 10
  • 900

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

Mindegyik arénában használhatsz ezekből a tárgyakból.

  • 900
  • 80
  • 10
  • 900

Extra +60 "

Extra +15 "

Extra +30 "

Passzolás

Következő

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

Válaszd ki a harci bajnokodat!

Írd be a neved:

Következő

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

Feladat 6
Feladat 3
Feladat 4
Feladat 5
Feladat 2
Feladat 1
Feladat 12
Feladat 8
Feladat 7
Feladat 11
Feladat 10
Feladat 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

  • Sok szerencsét!
  • Nem jó!
  • Helyes!
  • disabled
  • disabled
  • disabled
  • Gyerünk $P!

Fase 1

$3

01:00

03:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

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

$TXT QUIZ$ Texto del enunciado

Zseniális!

$1

Valami nem jó!

$2

PER

quiz, 5, T:Q1

Vissza
Újra

$TXT FEEDBACK$

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

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

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

$Q1:SP
$Q1:SH
Jutalom
§eval{$Q1:SH <= 2}§:true
§eval{$Q1:SH >= 20}§:true
§eval{$Q1:SH < 15}§:true
§eval{$Q1:SH < 10}§:true
  • Sok szerencsét!
  • Nem jó!
  • Helyes!
  • disabled
  • disabled
  • disabled
  • Gyerünk $P!

Fase 2

$3

01:00

00:30

00:15

03:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1
  1. &100 $v1[100,900] + $v2[1000,9999] + $v3[100,999]
    1. eval{$v2+$v1+$v3}
  2. &100 $v1[100,900] + $v2[1000,9999] + $v3[100,999]
    1. eval{$v2+$v1+$v3}
  3. &100 $v1[100,900] + $v2[1000,9999] + $v3[100,999]
    1. eval{$v2+$v1+$v3}

true

Zseniális!

$1

Valami nem jó!

$2

PER

$TXT QUIZ$ Texto del enunciado

quiz, 5, T:Q2

Vissza
Újra

$TXT FEEDBACK$

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

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

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

$Q2:SP
$Q2:SH
Jutalom
§eval{$Q2:SH <= 2}§:true
§eval{$Q2:SH >= 20}§:true
§eval{$Q2:SH < 10}§:true
§eval{$Q2:SH < 15}§:true
  • Sok szerencsét!
  • Nem jó!
  • Helyes!
  • disabled
  • disabled
  • disabled
  • Gyerünk $P!

Fase 3

$3

01:00

00:30

00:15

01:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1
  1. &100 $v1[1000/2000/3000/4000/5000/6000/7000/8000/9000] + $v2[100,1000]
    1. eval{$v1+$v2}

true

Valami nem jó!

$2

Zseniális!

$1

$TXT QUIZ$ Texto del enunciado

quiz, 5, T:Q3

PER

Vissza
Újra

$TXT FEEDBACK$

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

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

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

$Q3:SP
$Q3:SH
Jutalom
§eval{$Q3:SH <= 2}§:true
§eval{$Q3:SH >= 20}§:true
§eval{$Q3:SH < 10}§:true
§eval{$Q3:SH < 15}§:true
  • Sok szerencsét!
  • Nem jó!
  • Helyes!
  • disabled
  • disabled
  • disabled
  • Gyerünk $P!

Fase 4

$3

01:00

00:15

00:30

05:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

  1. &100 $v1[1000,9999] - $v2[100,999]
    1. eval{$v1-$v2}

Valami nem jó!

$2

Zseniális!

$1

$TXT QUIZ$ Texto del enunciado

PER

quiz, 5, T:Q4

Vissza
Újra

$TXT FEEDBACK$

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

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

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

$Q4:SP
$Q4:SH
Jutalom
§eval{$Q4:SH <= 2}§:true
§eval{$Q4:SH >= 20}§:true
§eval{$Q4:SH < 10}§:true
§eval{$Q4:SH < 15}§:true
  • Sok szerencsét!
  • Nem jó!
  • Helyes!
  • disabled
  • disabled
  • disabled
  • Gyerünk $P!

Fase 5

$3

00:15

00:30

01:00

02:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

Valamit elrontottál!

$2

Zseniális!

$1

$TXT QUIZ$ Texto del enunciado

  1. &100 $v1[1000/2000/3000/4000/5000/6000/7000/8000/9000] - $v2[110,990]
    1. eval{$v1-$v2}

PER

quiz, 5, T:Q5

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
  • Sok szerencsét!
  • Nem jó!
  • Helyes!
  • disabled
  • disabled
  • disabled
  • Gyerünk $P!

Fase 6

$3

00:30

01:00

00:15

02:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1
  1. &100 $v1[1100,9900] - $v2[100,900]
    1. eval{$v1+$v2}
  2. &100 $v3[10000,90000] - $v4[1100,9900]
    1. eval{$v3-$v4}

    true

    Valamit elrontottál!

    $2

    Zseniális!

    $1

    PER

    $TXT QUIZ$ Texto del enunciado

    quiz, 5, T:Q6

    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
    • Sok szerencsét!
    • Nem jó!
    • Helyes!
    • disabled
    • disabled
    • disabled
    • Gyerünk $P!

    Fase 7

    $3

    00:30

    01:00

    00:15

    03:00

    $HITS1

    $J1:"§nom§"

    $J1:"§nom§"

    $SCORE1

    true

    1. &100 $v1[110,990] * $v2[2,9]
      1. eval{$v1*$v2}

      Valamit elrontottál!

      $2

      Zseniális!

      $1

      PER

      $TXT QUIZ$ Texto del enunciado

      quiz, 5, T:Q7

      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
      • Sok szerencsét!
      • Nem jó!
      • Helyes!
      • disabled
      • disabled
      • disabled
      • Gyerünk $P!

      Fase 8

      $3

      00:30

      01:00

      00:15

      03:00

      $HITS1

      $J1:"§nom§"

      $J1:"§nom§"

      $SCORE1
      1. &100 $v1[1000/2000/3000/4000/5000/6000/7000/8000/9000] * $v2[2,9]
        1. eval{$v1*$v2}

        true

        Valamit elrontottál!

        $2

        Zseniális!

        $1

        $TXT QUIZ$ Texto del enunciado

        PER

        quiz, 5, T:Q8

        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

        Fase 9

        • Sok szerencsét!
        • Nem jó!
        • Helyes!
        • disabled
        • disabled
        • disabled
        • Gyerünk $P!

        $3

        00:30

        01:00

        00:15

        05:30

        $HITS1

        $J1:"§nom§"

        $J1:"§nom§"

        $SCORE1

        true

        Valamit elrontottál!

        $2

        Zseniális!

        $1

        1. &100 $v1[100,999] * $v2[10,90]
          1. eval{$v1*$v2}

          $TXT QUIZ$ Texto del enunciado

          PER

          quiz, 5, T:Q9

          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
          • Sok szerencsét!
          • Nem jó!
          • Helyes!
          • disabled
          • disabled
          • disabled
          • Gyerünk $P!

          Fase 10

          $3

          01:00

          00:30

          00:15

          03:30

          $HITS1

          $J1:"§nom§"

          $J1:"§nom§"

          $SCORE1

          true

          Zseniális!

          $1

          1. &100 $v1[1000,9999] * $v2[10,90]
            1. eval{$v1*$v2}

            Valamit elrontottál!

            $2

            $TXT QUIZ$ Texto del enunciado

            PER

            quiz, 5, T:Q10

            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
            • Sok szerencsét!
            • Nem jó!
            • Helyes!
            • disabled
            • disabled
            • disabled
            • Gyerünk $P!

            Fase 11

            $3

            00:15

            01:00

            00:30

            04:00

            $HITS1

            $J1:"§nom§"

            $J1:"§nom§"

            $SCORE1

            true

            Valamit elrontottál!

            $2

            Zseniális!

            $1

            1. &100 $v1[100,999] * $v2[100,900]
              1. eval{$v1*$v2}

              $TXT QUIZ$ Texto del enunciado

              PER

              quiz, 3, T:Q11

              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
              • Sok szerencsét!
              • Nem jó!
              • Helyes!
              • disabled
              • disabled
              • disabled
              • Gyerünk $P!

              Fase 12

              $3

              00:30

              01:00

              00:15

              04:00

              $HITS1

              $J1:"§nom§"

              $J1:"§nom§"

              $SCORE1

              true

              Valamit elrontottál!

              $2

              Zseniális!

              $1

              1. &100 $v1[110,990] + $v2[100,999] * $v3[2,9]
                1. eval{$v1+$v2*$v3}

                $TXT QUIZ$ Texto del enunciado

                PER

                quiz, 3, T:Q12

                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

                Gratulálok!! Sikerült leküzdened az összes kihívást.

                • 900
                • 80
                • 10
                • 900

                A számolás igazi mestere vagy!

                Új játék

                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%