Nous avons récemment organisé notre premier concours de conception, axé sur les possibilités du bloc de code de Rise 360. Avec plus de 60 participations, la communauté a fait preuve d’une créativité, d’un esprit d’expérimentation et d’une capacité de résolution de problèmes exceptionnels.
Les gagnants ont été sélectionnés par un vote de la communauté, et ces trois projets se sont particulièrement distingués, chacun repoussant les limites du bloc de code d’une manière différente. Ces projets démontrent comment le bloc de code peut apporter une interactivité inédite et pertinente à Rise.
Découvrez les trois projets gagnants et les enseignements que vous pouvez en tirer.
💡 Essayez-le vous-même : Rise 360 : comment utiliser le bloc de code | Créer des blocs avec Vibe Coding
⚠️ Petit rappel :
Bien que le bloc de code soit entièrement pris en charge, l’équipe d’assistance d’Articulate ne peut pas dépanner ni déboguer le code personnalisé ajouté à un module. Si vous effectuez des tests, enregistrez et sauvegardez votre module avant d’apporter des modifications. Pour obtenir de l’aide ou des commentaires de vos pairs, rejoignez le groupe Bloc de code pour partager des idées et des solutions.
Première place : « Découvrez votre profil d’apprenant » par ClaudiaNadol891
🔗 Voir l’article original | Voir la demo
À propos du projet
Ce projet est une interaction ludique de deux minutes conçue pour aider les apprenants à réfléchir à leurs préférences d’apprentissage.
Débutante en programmation interactive, Claudia s’est lancée dans l’expérimentation, utilisant ChatGPT et Lovable comme outils collaboratifs. Après avoir exploré des modèles d’interaction simples et complexes, elle a opté pour une expérience fluide, privilégiant les micro-interactions qui soutiennent discrètement l’apprentissage plutôt que de le concurrencer.
Cette réalisation prouve qu’une rédaction réfléchie des consignes et un perfectionnement itératif peuvent produire des interactions soignées et conviviales pour les apprenants, même sans expérience approfondie en programmation.
Le point de vue de la communauté
« C’est un prompt très précis ! J’adore cette idée. » JenniferSavage-
« Bravo ! J’aime particulièrement les cartes empilées, avec un léger décalage et le compte à rebours à partir de 10. » Thomas_Shayon
Ce que vous pouvez retenir
- Considérez votre prompt comme un cahier des charges. Des objectifs clairs et une structure bien définie permettent d’obtenir de meilleurs résultats.
- Privilégiez la simplicité. Des interactions fluides peuvent avoir un impact considérable.
- Attendez-vous à des itérations. L’amélioration n’est pas un échec, mais une étape essentielle du processus.
Questions-réponses avec la créatrice
Q : Votre prompt était incroyablement détaillé. Qu’avez-vous appris sur la rédaction de prompts efficaces ?
Claudia : Avant de commencer mon projet, j’ai fait des recherches sur la rédaction de prompts. Il existe de nombreuses ressources. J’ai pris des notes, regardé des exemples et je me suis inspirée de la façon dont d’autres personnes ont structuré leurs idées.
Ce qui m’a le plus aidée, c’est d’être aussi précise que possible. Quand on sait clairement à quoi on veut que le résultat ressemble, le brainstorming devient plus facile. J’adore les listes et les puces, alors j’ai tout structuré de cette façon. Cela a clarifié ma pensée et amélioré les résultats.
J’ai appris qu’un prompt clair permet de gagner du temps, de réduire la frustration et d’avoir un bien meilleur point de départ. Cela ne signifie pas que tout sera parfait du premier coup, mais cela vous rapproche beaucoup plus de ce que vous souhaitez vraiment.
Q : Pour quelqu’un qui découvre le vibe coding, quel changement de mentalité vous a le plus aidé ?
Claudia : Ayez confiance en la méthode et n’ayez pas peur d’être débutant.
Il est très facile de se sentir dépassée et de penser : « C’est trop compliqué », « Je ne comprends rien » ou « Je réessayerai une autre fois ».
Le premier jour du concours de création, j’ai généré mon premier code et j’ai été émerveillée par les capacités de l’IA. Mais lorsque j’ai essayé d’ajuster le design à l’aide de prompts, j’ai été un peu frustrée car le résultat n’était pas celui que j’espérais. C’est là que j’ai compris que je devais améliorer ma façon de formuler les prompts.
Une fois que j’ai commencé à rédiger des prompts plus clairs et plus détaillés, les choses ont commencé à ressembler à ce que j’avais imaginé. Mon principal enseignement a donc été le suivant : ayez confiance en la méthode, autorisez-vous à être débutant et persévérez même lorsque tout n’est pas parfait.
Q : Qu’avez-vous appris sur le bloc de code Rise grâce à ce projet ?
Claudia : Cela m’a beaucoup appris et a incontestablement accéléré mon apprentissage.
Je suis certaine que j’aurais exploré le vibe coding et la fonctionnalité du bloc de code dans Rise à un moment ou un autre. Mais je ne pense pas que cela se serait fait aussi rapidement et aussi en profondeur sans le concours. J’en suis vraiment reconnaissante.
Le bloc de code dans Rise offre une multitude de possibilités. Il permet d’aller au-delà des mises en page standard et de créer quelque chose de plus personnalisé et interactif. On a vraiment l’impression d’avoir une liberté infinie pour expérimenter et enrichir son apprentissage.
Q : De quelle partie de ce projet êtes-vous le plus fière ?
Claudia : Le processus en lui-même. Apprendre et créer me procure une énergie très positive, et ce projet n’a pas fait exception. Malgré les difficultés et les nombreuses itérations, j’ai adoré y participer. Chaque série de modifications m’a appris quelque chose de nouveau.
Je me souviens de l’enthousiasme que j’ai ressenti en voyant, à chaque itération, la pile de cartes s’améliorer. Je n’arrivais pas à éteindre mon ordinateur portable.
Au-delà de l’interaction elle-même, j’ai aussi adoré faire des recherches approfondies sur la façon dont d’autres utilisent l’IA dans l’apprentissage. Cette partie était tout aussi inspirante que la création du projet.
Pour moi, ce n’est donc pas seulement le résultat final dont je suis fière, mais aussi la progression, la curiosité et l’enthousiasme tout au long de cette aventure.
Deuxième place : Outil de vérification de l’accessibilité par SheriLee
🔗 Voir l’article original | Voir la démo
À propos du projet
Sheri a créé l’outil de vérification de l’accessibilité après avoir constaté que la plupart des formations à l’accessibilité suivent un schéma prévisible : elles expliquent les règles, mais n’influencent pas les décisions. Souvent, les équipes déploient des expériences inaccessibles non pas par méconnaissance des directives, mais parce que les compromis leur semblent imperceptibles sur le moment.
Plutôt que de concevoir un énième tutoriel sous forme de liste de contrôle, elle a imaginé un simulateur court, basé sur la prise de décision et articulé autour d’une question centrale : « Quelle version déploieriez-vous ?»
L’expérience inclut une interface utilisateur personnalisée, une logique de notation, la gestion d’états et des étapes. Elle modélise également les bonnes pratiques d’accessibilité directement dans l’interaction, grâce à l’utilisation de HTML sémantique, de commandes utilisables au clavier, d’états de focus visibles et de couleurs à contraste élevé.
Le point de vue de la communauté
« Merci d’avoir démontré que la facilité d’utilisation doit être intégrée dès la conception et non pas considérée comme une simple réflexion après coup. » Michael_Ishola
« J’ai beaucoup apprécié cette démonstration interactive sur l’accessibilité. C’est un excellent moyen de susciter l’intérêt des apprenants et de les amener à réfléchir à la conception et au processus. » CharlottieMa153
Ce que vous pouvez retenir
- Pensez votre conception pour faciliter la prise de décision, pas seulement pour transmettre des informations. Les simulations peuvent améliorer les réflexes.
- Utilisez les contraintes à bon escient. Moins de consignes peuvent améliorer l’impact de votre module.
- Appliquez ce que vous enseignez. Intégrez l’accessibilité dès la conception.
Questions-réponses avec la créatrice
Q : Par où commencer avec les simulations basées sur la prise de décision ?
SheriLee : Commencez petit et précis. Cela vous permet de créer des simulations à embranchement multi-scènes sans vous perdre dans les scénarios. Ce projet est resté petit et concentré dans l’optique de refléter les cycles d’approbation de produits et de contenus réels. Essayez de petits projets simples pour renforcer votre confiance et développer vos idées.
Q : Comment ce projet a-t-il changé votre approche de l’accessibilité ?
SheriLee : Cette version a renforcé la nécessité de tester avec de vrais utilisateurs, de vérifier avec une technologie d’assistance et de tester l’accessibilité tout au long des processus de développement et de conception. Cela m’a montré que l’accessibilité doit être intégrée à l’ensemble du flux de travail avant la livraison.
Q : Qu’est-ce que ce projet vous a appris sur le bloc de code Rise ?
SheriLee : Le bloc de code Rise est un outil puissant que nous pouvons exploiter pour rendre le contenu plus attrayant. Il est également important de vous assurer que vous pouvez expliquer la logique de votre code dans un langage simple. Travaillez pour avoir un code propre et clair.
Q : De quelle partie de cette construction êtes-vous la plus fière ?
SheriLee : Je suis très fière de l’avoir « livré » et cela offre une certaine visibilité sur l’intégration de l’accessibilité tout au long du processus de conception et de développement. Plusieurs fois, j’ai commencé les challenges ou travaillé pour rendre du contenu accessible uniquement pour le donner sans « livrer ». Cette fois, j’ai « livré en gardant à l’esprit l’accessibilité ».
Troisième place : Peinture par numéros – Oiseaux ArthaLearning03
🔗 Voir l’article original | Voir la démo
À propos du projet
Pour cette équipe d’ornithologues passionnés, essayer de motiver les gens à s’intéresser à ce passe-temps pose toujours un problème classique : comment apprendre à distinguer les oiseaux ?
Plutôt que de s’appuyer sur des activités interactives de base telles que des flashcards ou des checklists, ils ont conçu un « espace atelier » pratique où les apprenants analysent visuellement les principales caractéristiques des oiseaux. L’expérience combine des schémas anatomiques, des photos de référence et des notes de terrain, puis met les apprenants au défi d’appliquer ce qu’ils ont appris en identifiant par eux-mêmes des différences visuelles subtiles.
En coulisses, l’équipe a combiné le vibe coding avec l’expertise humaine. La version a subi plusieurs étapes pour améliorer la convivialité, stabiliser le code et peaufiner le diagramme interactif.
Le point de vue de la communauté
« C’était incroyable et amusant ! Je vois un potentiel pour d’autres utilisations de la « peinture par numéros »…» LinneaConely
« WOW – Beaucoup d’interactivités – j’imagine qu’on pourrait utiliser cela pour la formation médicale. » TracyWindsor
Ce que vous pouvez retenir
- Le bloc de code prend en charge les environnements personnalisés de style « atelier ».
- Utilisez l’IA de manière stratégique. Affinez les petits composants au lieu de réécrire des fichiers entiers.
- Équilibrez l’expérimentation avec la direction. Sachez quand intervenir manuellement.
Questions-réponses avec les créateurs
Q : Quel conseil pouvez-vous donner pour créer ce genre d’activité interactive personnalisée de type atelier ?
ArthaLearning03 : Gardez un brouillon de code lorsque vous travaillez sur votre conception. Une fois que vous tombez sur une partie qui fonctionne, gardez-là ! Nous avons eu plus de succès en construisant des composants individuels au sein d’un tout, plutôt qu’en attaquant l’ensemble du bloc d’un coup.
Q : Qu’avez-vous appris sur la collaboration avec l’IA lors du codage ?
ArthaLearning03 : Toutes les IA ne sont pas construites de la même manière. Certains modèles ont donné la priorité à l’apparence, tandis que d’autres ont mis l’accent sur la fonctionnalité. Certains n’ont pas du tout pu nous aider à progresser dans notre bloc ! Avoir un expert au courant, comme notre développeur senior, nous a aidé à déterminer les éléments les plus utiles à tirer de nos collaborations avec l’IA.
Q : Qu’est-ce que ce projet vous a appris sur le bloc de code Rise ?
ArthaLearning03 : Le bloc de code Rise nous a donné une toile vierge lorsqu’il s’agissait de créer des activités interactives. Tout est possible… et toutes ces possibilités peuvent être écrasantes ! Avoir une direction forte tout en étant ouvert à l’expérimentation était notre recette secrète pour tirer le meilleur parti du bloc de code Rise.
Q : De quelle partie de cette construction êtes-vous le plus fier ?
ArthaLearning03 : Je suis le plus fier de l’écran principal « atelier ». C’est celui qui nous a pris le plus de temps à affiner et qui comporte de nombreuses interventions humaines, de l’illustration de l’oiseau à la fonctionnalité du moteur de recherche en passant par l’idée elle-même. Je pense que notre collaboration et notre passion transparaissent là-bas – c’est peut-être même le lieu où la passion jaillit pour un futur ornithologue amateur !
Qu’allez-vous créer ?
Ces trois projets utilisent le bloc de code Rise dans des directions très différentes, tout en partageant un thème clé : l’expérimentation réfléchie. Des prompts structurés à la conception de simulation en passant par une interface utilisateur personnalisée ambitieuse, chaque version montre qu’une activité interactive qui a du sens ne nécessite pas un environnement de développement complet, mais simplement de la curiosité, des itérations et une volonté d’essayer.
Si vous souhaitez expérimenter le bloc de code, gardez cela en ligne de mire.
Explorez d’autres soumissions du concours de projet ici.
Si cet article vous a plu, n’oubliez pas de revenir régulièrement sur les Essentiels du e-learning, pour y retrouver tous nos conseils pratiques et nos téléchargements gratuits pour le e-learning.
