Professeur 2.0 | Semaine 4

Mary Line
5 min readOct 26, 2020

Où en étions-nous arrivée?

Vous pouvez retrouver toute l’histoire d’Hocus en cliquant sur ces liens: semaine 01, semaine 02 et semaine 03.

Aussi non, je vous propose de vous faire un petit résumé…

Nous avons une histoire….

Il était une fois dans le royaume perdu d’Hocus, Magichouette, un maître magicien pas comme les autres. En effet, ses pouvoirs magiques fonctionnent grâce à des programmes informatiques. Un jour, son ennemi Magibou lui a dérobé son chat. Il était disposé à rendre l’animal en échange d’une pierre précieuse dont seul Magichouette connaît l’algorithme. Mais le magicien s’étant cassé une aile en essayant de sauver son acolyte, ne parvient plus à utiliser ses pouvoirs. Dans son royaume personne ne possède les compétences pour l’aider mais toi… Oui toi… Je le sens, tu en es capable.

Des exercices avec des objectifs

Étape 01 — L’enfant accompagné d’Hocus, va réaliser grâce aux fioles de couleur primaire des fioles de couleur secondaire.

Découvrir le fonctionnement du jeu.
Comprendre que la précision est importante dans la réalisation des instructions.

Étape 02 — L’objectif de cette étape est de réaliser la potion arc-en-ciel.

Apprendre la notion de séquence.
Comprendre que l’ordre des instructions ont une importance.

Étape 03 — Ce dernier exercice va permettre de créer le cristal.

Terminer la quête “sauver le chat”.
Introduction de la notion de boucle

Que devons-nous encore faire?

Un User Journey…

Écran de veille

Le fond d’écran est animé de plein de petite étoile qui brille. De temps en temps Magichouette passe afin d’attirer l’attention des enfants.

Écrans de veille

Écrans introduction

L’introduction est une animation réalisée sur After Effect. Elle raconterait l’histoire de Magichouette.

Les plans de l’animation

Écrans avec les explications

Magichouette va aborder des thermes de programmation et faire le lien avec la magie. Ensuite vient l’explication de comment jouer sur Hocus.

Écrans de l’étape par étape

Nous avons séparé l’étape 01 en 3 parties. Chaque partie représente la création d’une fiole secondaire. L’enfant à deux essaies pour réaliser la potion. À partir du troisième, Magichouette lui donne des indices. Comme ça l’enfant à la capacité d’être libre d’essayer ce qu’il souhaite tout en étant aidé après un certain temps pour éviter qu’il ne se lasse.

Étape 01, Exercice 01 — Magichouette demande à l’enfant de réaliser une potion dans lui donner trop d’indice. L’enfant ainsi n’est pas trop guider.
Étape 01, Exercice 02 — L’enfant doit créer la potion verte.
Étape 01, Exercice 03 — Il ne reste plus qu’à créer la dernière fiole de couleur secondaire
Étape 02 — Potion arc-en-ciel
Étape 03 — Cristal arc-en-ciel

User journey sur figma

Des textes

Lors de la réalisation du User Jouney, nous avons écrit les textes avec toutes les informations dont l’enfant avait besoin. Joachim s’est chargé de les rendre plus fun.

Voici quelques exemples:

“Bienvenue dans mon atelier, nous allons créer des algorithmes de potion magique.” est devenu….

Bienvenue dans mon atelier! Merci d’accepter de m’aider à créer des algorithmes de potion magique.

“On dirait que tu as besoin d’aide, je vais te guider” est devenu…

Oula, on dirait que tu as besoin d’aide. Pas de panique, je vais te guider!

“La potion arc-en-ciel vient de s’ajouter à l’étagère. Nous pouvons enfin réaliser notre cristal.” est devenu…

Perceval me manque tellement! Aller, plus qu’un algorithme àécrire et j’aurais enfin la pierre pour le récupérer.

Un design

Écran de veille
Écran création d’algorithme
Écran animation de l’algorithme

Un projecteur ou un écran

Nous voulions utiliser un projecteur pour afficher notre jeu. L’idée a été abandonnée car il nous était impossible d’avoir un affichage correct. L’image projeter était déformé et rogner. De plus, Il est difficile d’avoir de jolie couleur avec un projecteur.

Nos tests pour la projection du jeu

Nous avons donc décidé d’utiliser un écran de TV. Ainsi nous pouvions avoir une meilleure gestion des couleurs et nous avions un écran plus grand que celui d’un pc.

L’écran TV utilisé pour le jeu

Un peu de code

Nous commençons petit à petit à coder le jeu. Joachim s’occupe de l’html et du Css tandis qu’Arthur commence le javascript. Cette semaine nous avons commencé le code. Joachim a commencé à coder le jeu en html/css. Tandis qu’Arthur s’occupe du Javascript.

Début du code
Page accueil

Pour conclure cette semaine…

Durant cette semaine, nous avons créé notre design, notre user journey et commencé à coder. À chacune de ces étapes, nous avons pu voir notre jeu prendre forme. Nous espérons avoir fini le plus gros du travail pour jeudi afin de pouvoir profiter des semaines suivant pour le peaufiner.

Le jeu n’est pas la seule chose que nous devons faire. Nous devons commencer à travailler sur notre site de présentation ainsi que sur notre stand.

Pour plus d’informations, nous vous invitons à lire notre google docs où nous écrivons toutes les idées qui nous passe par la tête ainsi que nos “to do” listes.

--

--