Dans la continuité de la production réalisée lors de l'exercice 2 : "Réaliser une flashcard avec Javascript", l'objectif a été ici de créer une page intégrant un Dispositif pédagogique interactif dans le même thème et d'entrer encore plus en profondeur dans la compréhension de ce qu'est la réalité virtuelle, notamment son intégration en milieu éducatif en proposant une expérience plus immersive et engageante.
Il s'agit d'un site informatif qui renseigne de manière très brève et surfacique sur ce qu'est la VR (virtual reality), ses potentiels, ses intérêts dans un cadre éducatif. Un Quizz a été intégré à cette page afin de rendre l'apprentissage participatif et interactif en sollicitant activement l'apprenant dans la mobilisation des connaissances nouvellement construites.
Ce Quizz a été réalisé en Javascript, et permet de récupérer le score total obtenu sur la base de 5 questions portant sur la vidéo introductive intégrée au site visualisée précédemment.
Enfin un dispositif de "trophées" est mis en place afin de solliciter le système de la récompense des utilisateurs et rendre plus "léger" et "fun" l'apprentissage au travers de Gif et de références Pop cultures. Ce dernier dispositif est perfectible et ne reflète pas totalement mes ambitions / envies mais je détaillerais ce point dans la partie "auto-évaluation" un peu plus bas.
Design
A chaque exercice j'essai de me perfectionner dans le design utilisé et l'ergonomie du site. Le rendre le plus attractif (agréable visuellement) et utilisable est un challenge que je me fixe à chaque fois en m'inspirant de ce qui existe.
J'ai personnellement réalisé la vidéo de présentation intégrée au site, avec Power Point, en utilisant des illustrations .svg libres de droit (toutes les références ont été citées en bas de la page).
J'ai donc souhaité innové et proposer un visuel moins lourd que les fois précédentes. Je pense cependant que certains aspects visuels sont perfectibles, notamment la lisibilité (police peut-être un peu petite selon les écrans). Mon site n'est également pas responsive et ne s'adapte que peu correctement aux type de dispositif utilisé (ordinateur, tablette, smartphone), mais je détaillerais ce points plus en avant dans la partie auto-évaluation.
J'ai pour objectif de mettre à jour le design de mes différentes pages (travaux, personnelle, rapport) dans l'objectif de rendre le tout cohérent avec des visuels moins "hétérogènes" et plus consistants.
Production
La structure du code du Quizz a été construit en m'inspirant de toutes les références citées en bas de la page. C'est un peu un pêle-mêle de plein de références et beaucoup de temps à passer à comprendre comment le code peut et doit fonctionner. je me suis également inspiré de travaux disponibles sur CodePen pour réaliser ce Quizz et j'ai beaucoup échangé sur des forums / discords pour le mettre en place et l'adapter à mes besoins / au contenu que je souhaitait évaluer.
La vidéo de présentation, comme indiqué plus haut, a été réalisée par moi-même. Cette vidéo a initialement été réalisée pour l'exercice 4 mais à terme les deux pages (exercice 3 et 4) seront liées et communicantes et proposeront une expérience d'apprentissage plus complète et immersive.
Auto-évaluation
Après avoir réalisé l'exercice 2 sur la Flashcard j'avais déjà appréhendé la complexité du Javascript. Avec cet exercice je me suis rendu compte que ça demandait vraiment de solides connaissances en syntaxe afin de comprendre comment le code peut être interprété correctement par le navigateur. Je me rend compte qu'après avoir réalisé cet exercice 3, même si ma compréhension de ce langage s'est un peu améliorée depuis l'exercice 2, j'ai encore énormément de choses à apprendre pour exploiter correctement les potentiels du JS et mettre en oeuvre mes idées.
C'est en effet sur cet aspect que je bloque. Mes connaissances techniques étant extrêmement limitées en JS, et ma compréhension de la syntaxe assez faible, je me sens très limité dans ce que je me sens capable de faire, en comparaison à ce que je souhaiterais faire. J'ai beaucoup d'idées, mais lorsqu'il s'agit de les formaliser en code, je passe un temps fou à chercher sur des forums ou à échanger avec des "codeurs" pour peu d'amélioration. Le JS me semble peu intelligible et beaucoup moins intuitif que le CSS ou l'HTML et le gap de compétence entre le JS et HTML/CSS me paraît immense.
Concernant l'adaptabilité de mon site au différents supports (tablette, pc, smartphone), je n'ai pas souhaité travailler dessus à cet exercice. Mais avoir un site responsive, chose indispensable aujourd'hui, fait partie des compétences que je souhaiterais développer dans les exercices à venir.
La partie "trophées" du site est clairement perfectible et n'est pas représentative de l'idée que je me faisais à la base de son intégration dans le système d'évaluation. Je souhaitais que le tout soit automatisé, et non dépendant d'une action de l'utilisateur (qui doit lui-même choisir son intervalle de score), mais je n'ai pas su le mettre en place.
Ressources
J'ai utilisé beaucoup de ressources différentes pour réaliser à la fois le Quiz et les Flipcard. J'ai également lu beaucoup de forums (OpenClassRooms, Stack overflow...) pour m'aider à la conception du site. Voir dans la section Bibliographie et ressources ci-dessous.
