Forums - La Blocothèque - Une jauge temporelle !

  • Anonyme  | Posté le 7 février 2020 à 16 h 44 min

    Bonjour,

    avec un compte à rebours, j’ai défini le temps maximal pour répondre à une question.
    J’arrive à trouver depuis combien de temps la question a été posée avec la variable _time.

    Ce que je souhaiterais, c’est créer une zone cliquable (par exemple) d’une hauteur variable en fonction du temps.

    En effectuant en calcul dans la hauteur de la zone cliquable, cela fonctionne MAIS
    comment le faire en permanence ? je ne peux pas mettre le calcul à tous les bocs de mon chemin.

    Y a t’il moyen de mettre à jour un paramètre de manière continue ?

    Merci
    Raoul Oppliger

    Yannick Audéoud  | Posté le 7 février 2020 à 22 h 43 min

    Bonjour !

    Merci pour vos retours.
    Voici quelques éléments de réponse qui devraient pouvoir vous aider.

    1. Une jauge avec une zone cliquable

    Pour créer un effet de jauge qui se remplit ou se vide avec une zone cliquable, le plus simple est d’utiliser l’option « Remplissage » présente dans les paramètres avancées de chaque zone. Cette option se trouve en dessous de la Hauteur et la Rotation.

    Il s’agit de calculer une valeur entre 0 et 1 qui définira le « taux de remplissage » de la zone (0 pour vide et 1 pour remplie), et donc pouvoir créer un effet de jauge plus facilement qu’en modifiant la hauteur.

    Cependant, comme pour la hauteur, la mise à jour du remplissage de la zone n’est fait que lorsque le bloc correspondant est exécuté. Ce n’est donc pas adapté pour afficher un indicateur qui se met à jour en temps réel pendant un autre bloc.
    C’est en revanche une évolution qui pourrait être intéressante pour une prochaine version de VTS Editor !

    2. Écrire le temps restant dans un texte : variables _time et _countdown

    Comme solution de contournement, vous pouvez envisager d’écrire le temps restant dans un texte avec des variables.
    Par rapport aux variables dans les dimensions des zones cliquables, les textes ont l’avantage de se mettre à jour à tout moment, dès lors qu’une variable qu’ils contiennent est modifiée.

    Ainsi, si vous écrivez {_time} dans n’importe quel texte (dans une zone cliquable, dans le titre d’un Quiz, ou dans le titre d’un bloc Questions-Réponses), vous verrez défiler le nombre de secondes écoulées depuis le début du scénario en temps réel.

    Mais vous avez aussi accès à la variable _countdown, qui dans votre cas me semble très intéressante.
    Cette variable représente le temps écoulé depuis le début du dernier bloc Compte à Rebours.

    Ainsi, si votre Compte à Rebours dure 30 secondes, vous pouvez par exemple écrire Temps restant : {30 – _countdown} dans le titre d’un bloc Questions-Réponses, comme ceci :

    graph

    qa

    Vous pouvez ensuite aller encore plus loin en utilisant les balises de mise en forme pour ajouter du gras et de la couleur.

    Ainsi, en combinant le bloc Compte à Rebours, la balise <b> (gras), <color> (couleur) et la fonction condition, nous pouvons assez facilement créer un bloc Quiz :
    – Limité à 30 secondes
    – Avec le temps restant pour répondre affiché en gras dans la question
    – Le temps restant affiché en vert s’il reste plus de 5 secondes
    – Le temps restant affiché en rouge s’il reste moins de 5 secondes

    quiz

    Le texte inséré dans la question du Quiz est celui-ci :

    Quelle est la réponse à cette question ?
    Ne traînez pas, vous n’avez que 30 secondes !

    <b>TEMPS RESTANT : <color={condition(30 – _countdown <= 5, "#FF0000", "#00FF00")}>{30 – _countdown}</color></b>

    Décomposons la dernière ligne de ce texte pour bien la comprendre :
    – Le tout est entouré d’une balise <b> pour mettre le temps restant en gras.
    {30 – _countdown} : le temps restant écrit dans le texte
    – Le temps est entouré d’une balise <color> pour définir sa couleur (rouge ou vert).
    – La balise <color> s’utilise en écrivant <color=UNE_COULEUR>texte</color> en mettant ce que l’on veut dans UNE_COULEUR. Ici, on a choisi d’écrire non pas directement une couleur fixe, mais une couleur créée à partir de variables : {condition(30 – _countdown <= 5, "#FF0000", "#00FF00")}

    Décomposons {condition(30 – _countdown <= 5, "#FF0000", "#00FF00")} :
    "#FF0000" et "#00FF00" : ce sont les couleurs rouge et vert au format hexadécimal
    condition(A, B, C) : si A est true, retourne B, sinon retourne C.
    – Ainsi, condition(30 - _countdown <= 5, "#FF0000", "#00FF00") retourne "#FF0000" (donc rouge) si le temps restant est inférieur ou égal à 5 secondes, sinon retourne "#00FF00" (donc vert).

    On voit ainsi que ces quelques outils permettent de pousser la liberté offerte par VTS Editor encore plus loin !

    En espérant que ces pistes puissent vous permettre de trouver votre bonheur.

    Bien cordialement,
    Yannick