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

Get started free

2n Missió 28: Mathmental Royale.

Roser Torras Baques

Created on June 15, 2022

Start designing with a free template

Discover more than 1500 professional designs like these:

Essential Business Proposal

Project Roadmap Timeline

Step-by-Step Timeline: How to Develop an Idea

Artificial Intelligence History Timeline

Mind Map: The 4 Pillars of Success

Big Data: The Data That Drives the World

Momentum: Onboarding Presentation

Explore all templates

Transcript

Reutilizar

Una èpica batalla està a punt de començar.

  • 900
  • 80
  • 10
  • 900
  1. 12

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

Demostra la teva habilitat amb el càlcul mental.

  • 900
  • 80
  • 10
  • 900

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

Aconsegueix recompenses en cada repte.

  • 900
  • 80
  • 10
  • 900

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

i venç al Rei Vermell!

  • 900
  • 80
  • 10
  • 900

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

En cada Repte pots utilitzar alguns d'aquests objectes.

  • 900
  • 80
  • 10
  • 900

Temps extra +60"

Temps extra +15"

Temps extra +30"

Passar pregunta

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

Escull el teu campió de batalla

Escriu el teu nom

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

Repte 6
Repte 3
Repte 4
Repte 5
Repte 2
Repte 1
Repte 12
Repte 8
Repte 11
Repte10
Repte 7
Repte 9

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

¡Aquí tienes tu progreso, §nom§!

$3

§nom§

§nom§

$Q4:SP
$Q4:SH
$Q1:SP
$Q1:SH
$Q5:SP
$Q5:SH
$Q3:SP
$Q3:SH
$Q2:SP
$Q2:SH
$Q6:SP
$Q6:SH
$Q7:SP
$Q9:SP
$Q10:SP
$Q7:SH
$Q11:SP
$Q9:SH
$Q10:SH
$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

$3

  • BONA SORT!
  • NO ÉS CORRECTE!
  • MOLT BÉ! |FANTÀSTIC | GENIAL!
  • disabled
  • disabled
  • disabled
  • SOM-HI $P!

01:00

01:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

Genial !

$1

Algo salió mal

$2

$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 < 10}§:true
§eval{$Q1:SH < 15}§:true

Fase 2

$3

  • BONA SORT!
  • NO ÉS CORRECTE!
  • MOLT BÉ! | FANTÀSTIC | GENIAL!
  • disabled
  • disabled
  • disabled
  • SOM-HI $P!

00:30

00:15

01:00

01:00

$HITS1

$J1:"§nom§"

$J1:"§nom§"

$SCORE1

true

Genial !

$1

Algo salió mal

$2

PER

$TXT QUIZ$ Texto del enunciado

quiz, 5, T:Q2

Volver
Reinicia

$TXT FEEDBACK$

  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}

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

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

§eval{$Q2:SH < 15}§: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

  • BONA SORT!
  • NO ÉS CORRECTE!
  • MOLT BÉ! | FANTÀSTIC | GENIAL!
  • disabled
  • disabled
  • disabled
  • SOM-HI $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

  • BONA SORT!
  • NO ÉS CORRECTE!
  • MOLT BÉ! | FANTÀSTIC | GENIAL
  • disabled
  • disabled
  • disabled
  • SOM-HI $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 >= 20}§:true

§eval{$Q4:SH < 15}§: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

  • BONA SORT!
  • NO ÉS CORRECTE!
  • MOLT BÉ! | FANTÀSTIC | GENIAL!
  • disabled
  • disabled
  • disabled
  • SOM-HI $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 < 15}§:true

§eval{$Q5:SH < 10}§: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

    • BONA SORT!
    • NO ÉS CORRECTE!
    • MOLT BÉ! | FANTÀSTIC | GENIAL
    • disabled
    • disabled
    • disabled
    • SOM-HI $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[1,9] - $v2[1,9]
      1. eval{$v1-$v2}

      Fase 7

      $3

      • BONA SORT!
      • NO ÉS CORRECTE!
      • MOLT BÉ! | FANTÀSTIC | GENIAL!
      • disabled
      • disabled
      • disabled
      • SOM-HI $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 >= 20}§:true

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

      §eval{$Q7:SH < 10}§: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

        • BONA SORT!
        • NO ÉS CORRECTE!
        • MOLT BÉ! | FANTÀSTIC | GENIAL!
        • disabled
        • disabled
        • disabled
        • SOM-HI $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[10/20/30/40/50/60/70/80/90] - $v2[1,9]
          1. eval{$v1-$v2}

          Fase 9

          $3

          • BONA SORT!
          • NO ÉS CORRECTE!
          • MOLT BÉ! | BRUTAL! | GRAN!
          • disabled
          • disabled
          • disabled
          • SOM-HI $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[110/120/130/140/150/160/170/180/190/200/210/220/230/240/250] - $v2[10/20/30/40/50/60/70/80/90]
            1. eval{$v1-$v2}

            Fase 10

            $3

            • BONA SORT!
            • NO ÉS CORRECTE!
            • MOLT BÉ! | BRUTAL! | GRAN!
            • disabled
            • disabled
            • disabled
            • SOM-HI $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 >= 20}§:true

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

            §eval{$Q10:SH < 10}§: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[100/110/120/130/140/150/160/170/180/190/200] - $v2[1,9]
              1. eval{$v1-$v2}

              Fase 11

              $3

              • BONA SORT!
              • NO ÉS CORRECTE!
              • MOLT BÉ! | FANTÀSTIC! | BRUTAL!
              • disabled
              • disabled
              • disabled
              • SOM-HI $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[11,99]
                1. eval{$v1-$v2}

                Fase 12

                $3

                00:30

                01:00

                00:15

                04:00

                $HITS1

                $J1:"§nom§"

                $J1:"§nom§"

                $SCORE1
                • BONA SORT!
                • NO ÉS CORRECTE!
                • MOLT BÉ! | FANTÀSTIC | BRUTAL!
                • disabled
                • disabled
                • disabled
                • SOM-HI $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

                Enhorabona! Has aconsseguit superar tots els reptes!

                • 900
                • 80
                • 10
                • 900

                Ets un/a autèntic/a mestre/a del càlcul 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%