# data[].attributes.attachment_link.title
Code n' Slash - Coder son propre niveau de jeu vidéo !

# data[].attributes.attachment_link.readable_text
Qu'est-ce qu'Utopian Architect ?

Utopian Architect est un outil ludique et créatif d'apprentissage de la programmation informatique avec lequel vous programmez un petit robot constructeur volant, qui peut se déplacer et lâcher des blocs carrés de divers matériaux (sable, brique, verre, bois...), afin de réaliser des bâtiments de votre choix.

À qui s'adresse-t-il ?

Utopian Architect a été conçu pour un public très large. Il a été ainsi utilisé avec succès :

lors d'ateliers destinés à des enfants de 7 à 10 ans

lors d'ateliers pour adultes, sur la découverte de la programmation

au cours de formations professionnelles de perfectionnement pour des développeurs

avec des classes d'étudiants lors de cours de programmation dans l'enseignement supérieur

Comment l'utiliser ?

Encore en phase de développement, il lui manque pour le moment les éléments nécessaires à sa prise en main autonome par des débutants. Il est toutefois pleinement utiliser pour animer des ateliers encadrés par un ou plusieurs animateurs déjà familiers avec la programmation.

L'outil est gratuitement accessible en ligne. Il suffit de disposer d'un navigateur internet tel que Chrome, Firefox ou Internet Explorer, dans une version récente.

Quelles notions l'outil permet-il d'aborder ?

Le robot d'Utopian Architect se programme en écrivant des scripts dans un langage complet et puissant. Donc en principe quasiment toutes les notions de programmation peuvent être abordées grâce à cet outil, selon les intentions de l'animateur et le niveau de son public.

Cependant Utopian Architect a été spécifiquement conçu pour faciliter la découverte et l'apprentissage de la notion de fonction et ce qui en découle :

les fonctions simples

les fonctions avec paramètres

la différence entre définir une fonction et l'exécuter

la possibilité de faire appel à une fonction à l'intérieur d'une autre fonction

l'utilité des fonctions comme boîte à outil sur diverses échelles : pour faire de grosses constructions (exemple d'une fonction "chateau") ou pour se constituer un petit outil pratique (exemple d'une fonction qui fait monter le robot s'il n'a plus de place en dessous de lui)

Avec, en arrière plan, la volonté de sensibiliser aux bonnes pratiques de la programmation.

Des "bonnes pratiques" ?

Oui. L'un des objectifs assumés d'Utopian Architect est, à travers ce contexte ludique, de confronter l'utilisateur à des problématiques rencontrées par les développeurs professionnels, et de le sensibiliser aux bonnes pratiques suivies par les bons programmeurs :

le principe DRY (Don't Repeat Yourself) : éviter la duplication de code

l'importance du nommage des fonctions et des variables, pour la lisibilité

le découpage du programme en fonctions courtes

le principe de responsabilité unique

les notions de modularité et de robustesse

De manière générale, Utopian Architect permet de soulever rapidement des questions liées à l' architecture d'un programme.

Un exemple de petit exercice qui permet d'aborder ce genre de points : programmer le robot pour qu'il sache construire des pyramides de différentes hauteurs.

Le but est-il de "fabriquer" des développeurs professionnels ?

Non. S'il est vrai qu'Utopian Architect est parfois utilisé lors de formations professionnelles, il s'adresse largement à ceux qui souhaitent découvrir la programmation comme loisir, que ce soit par simple curiosité intellectuelle, pour se lancer de petits défis, ou comme moyen de création.

Mais, contrairement à l'image que la programmation peut avoir auprès du grand public (notamment véhiculée par les films hollywoodiens) savoir programmer ce n'est pas tant construire des algorithmes puissants, faire des calculs compliquées, ou savoir traiter de technique pure... non, programmer c'est avant tout l'art d'organiser sa pensée, de structurer des choses plutôt abstraites, de savoir décomposer des gros problèmes en problèmes plus petits. Le tout, dans un contexte créatif.

Ainsi, nous estimons que les bonnes pratiques mises en oeuvre en programmation, et notamment au travers d'Utopian Architect, peuvent donner une prise de recul et un éclairage intéressants, même dans la vie de tous les jours.

Quelle approche pédagogique ?

Utopian Architect est pensé pour rassurer le débutant à son arrivée, et le faire naturellement glisser petit à petit vers plus de complexité.

Premiere phase : prise en main simplifiée

La plus grande partie de l'interface est dédiée à la visualisation, avec des arbres, des plantes, beaucoup de ciel : le nouvel arrivant n'est pas trop dépaysé par de l'abstraction. Il peut commencer à utiliser les boutons pour entrer les commandes du robot, et dans cette première phase il va se sensibiliser avec l'interface, le bouton "Play" et le curseur pour remonter dans le temps.

Deuxième phase : utilisation du mode texte

Une deuxième phase arrive assez naturellement : soit pour supprimer des blocs, soit pour les modifier, à un moment où un autre il va falloir utiliser le mode texte. Et puis, le copier-coller est tentant, pour refaire la même chose rapidement. Le mode texte prend donc de plus en plus d'importance.

Le curseur temporel, avec mise en surbrillance de la ligne de code responsable de l'action courante du robot, facilite cette transition vers le script, avec un aller-retour entre la cause (code) et la conséquence (déplacement, lâcher de bloc).

Troisième phase : découverte des fonctions

Une troisième phase se présente quand la construction commence à être conséquente : le code devient long, pénible pour s'y retrouver... c'est le moment idéal pour l'animateur de présenter les fonctions (qui restaient discrètes dans un coin de l'interface pour ne pas faire peur au nouvel arrivant en première phase). La première fonction créée le sera souvent pour y couper / coller une portion de code.

Cette petite complexité, amenée par l'animateur, inquiète forcément un peu le débutant, mais il y trouve rapidement son compte : son code s'en retrouve simplifié, mieux rangé, et il peut le ressentir. Mais surtout, la découverte des fonctions s'associe à un sentiment de puissance : "je peux faire 4 maisons si je veux ? même 10 ?". Oui, et très facilement, un appel de fonction par maison.

C'est ce déclic qui est recherché. Jusque là, la programmation du robot pouvait paraître plus fastidieuse qu'une construction à la Minecraft (par exemple si on avait pu simplement cliquer/déposer pour placer des blocs). À partir du moment où il utilise les fonctions, ça bascule : il peut faire des choses plus puissantes grâce au robot programmé. Et il peut se laisser aller à ses envies de bâtisseur mégalomane...

Fréquemment, dans un atelier, plusieurs participants (adultes ou enfants) refusent dans un premier temps de passer aux fonctions, à cause de la barrière d'abstraction que ça représente. Pas de problème : très souvent ils adoptent les fonctions un peu plus tard, voyant ce que leurs voisins arrivent à en faire. Utopian Architect est là justement pour ne pas imposer les fonctions comme un concept théorique dans un cours magistral. Ici, normalement, c'est plutôt le débutant qui va être demandeur, avec une mise en application concrète dont le bénéfice apparaît immédiatement.

Quatrième phase : les fonctions avec arguments

La quatrième phase est la plus ardue : rendre les fonctions plus puissantes et le code plus modulaire en passant des paramètres en argument des fonctions. On plonge davantage dans l'abstraction, et celà nécessite souvent plusieurs passages avant que la notion soit comprise. Dans un atelier classique on remarque souvent qu'environ un tiers des participants y arrive assez bien, un tiers n'y arrive pas, et un tiers est dans une zone intermédiaire, ayant du mal à mettre en pratique. Avec de jeunes enfants cette phase n'est proposée qu'à ceux qui sont les plus à l'aise, et dont l'animateur aura su attiser la curiosité.

Bonnes pratiques et architecture

En parallèle ou en prolongement de cette quatrième phase (en pratique dès que la troisième phase avec apparition des fonctions est assimilée) il est possible d'aborder des problématiques d'architecture de code, l'importance du nommage des fonctions, quelle décomposition du programme pour quel problème, etc. Avec un public déjà programmeur, ces points sont abordés pratiquement dès le départ, immédiatement après la prise en main de l'outil.

Qui est derrière Utopian Architect ?

Il est développé par l'équipe de Toxicode. Plus précisément, il est conçu par Pierre Lancien, qui a été aidé à la réalisation par Pierrick Kyburtz (graphismes) et Julien Berthou (développement).

Nous concevons également d'autres outils d'apprentissage. Pour arriver à financer ces projets qui nous tiennent à coeur, nous réalisons des prestations de conseil et de développement d'applications et sites internet, ainsi que des formations professionnelles. Nos technologies phares sont JavaScript, HTML5, NodeJS, Ruby on Rails.

Cette partie rémunérée de notre activité nous prend davantage de temps qu'on ne le souhaiterait, et ralentit l'avancée de nos projets internes. Si vous avez aimé nos outils, vous pouvez nous aider en parlant d'eux et de Toxicode autour de vous.

Il existe d'autres applis et outils d'apprentissage du code. Quelles sont les spécificités d'Utopian Architect ?

La pratique de la programmation embrasse un champ très large, et peut être abordée par de très divers chemins, souvent complémentaires. Un des outils les plus connus pour apprendre aux enfants est Scratch. Une approche différente est proposée par Codecademy...

D'ailleurs au sein de Toxicode, nous avons créé plusieurs outils d'apprentissage différents.

Pour vous aider à replacer Utopian Architect dans ce contexte, voici ses spécificités :

programmation en mode texte, à base de langage JavaScript, mais avec une première approche mixte (utilisation de boutons)

lien visuel entre le script et son résultat (quelle ligne est responsable de ce que fait le robot maintenant ?)

mise en avant de la notion de fonctions

accent mis sur des bonnes pratiques de la programmation (ne pas se répéter, décomposer son code...)

approche de la programmation ludique et créative, assez libre

convient aux enfants qui découvrent mais aussi à des adultes qui souhaitent approfondir

Quelles inspirations derrière cet outil ?

Historiquement, un des premiers outils pour apprendre à programmer a été, dans les années 70, le langage Logo et sa tortue. Le point de départ de Utopian Architect a été cette simple question :

"À quoi aurait pu ressembler Logo s'il avait été créé dans les années 2010 ?"

Nous avons alors repris des caractéristiques principales de Logo : créer pour apprendre, environnement visuel, mise en avant des fonctions. Et nous avons adapté la tortue à notre époque et à son nouveau jeune public potentiel : Utopian Architect est sur internet, le triangle de la tortue est remplacée par un robot, et au lieu de dessiner des formes géométriques on construit avec des blocs, en rappel évident à Minecraft, que beaucoup d'enfants apprécient.

Quel langage est utilisé pour coder dans Utopian Architect ?

Un des langage les plus utilisés au monde, qui est aussi un incontournable de la programmation d'applications ou sites internet : le JavaScript. Avec une surcouche ajoutée par Toxicode : des fonctions déjà fournies pour piloter le robot.

Au coeur de l'outil, ou quand nous animons des ateliers, nous mettons peu en avant le fait que le langage est du JavaScript, car c'est au fond assez accessoire : sauf si l'utilisateur souhaite avoir d'Utopian Architect un usage avancé, notre choix de langage a peu d'influence sur la manière de programmer le robot. Utopian Architect n'est pas un outil pour apprendre JavaScript, c'est un outil pour apprendre à programmer, et de manière plus générale mettre en oeuvre les mécanismes de pensée du programmeur / créateur.

Quelles sont les évolutions prévues ?

Utopian Architect reste en cours de développement, et plusieurs pistes sont prévues pour la suite. Les objectifs :

Faciliter l'accès à des débutants, en allant vers l'autonomie, chez soi, sans animateur nécessaire.

Rendre les choses plus intéressantes et ludiques pour les codeurs confirmés.

Prolonger la durée de vie et l'intérêt de l'utilisateur.

Voici nos évolutions prévues pour y parvenir, certaines étant déjà en travaux :

Un meilleur traitement des erreurs, avec de meilleurs messages et dans certains cas un diagnostic et des suggestions (Vous avez écrit 'woood', ne vouliez vous pas plutôt dire 'wood' ?).

Possibilité de sauver sa création et de la partager.

Refonte de l'interface, documentation plus accessible et jolie.

Multilingue français et anglais.

Challenges guidés, où il faut reproduire un bâtiment.

Indicateur d'efficacité du code (ratio du nombre de commandes nécessaires / nombre d'actions réalisées).

Tutoriel pour aider le nouvel arrivant.

Des blocs "aimants" permettant de faire tenir leurs blocs voisins au dessus du vide, afin de pouvoir construire des ponts et structures plus complexes.

# data[].attributes.attachment_link.description
Utopian Architect est un outil ludique et créatif d'apprentissage de la programmation informatique avec lequel vous programmez un petit robot constructeur volant, qui peut se déplacer et lâcher des blocs carrés de divers matériaux (sable, brique, verre, bois...), afin de réaliser des bâtiments de votre choix.

# data[].attributes.attachment_link.readable_text
In a nutshell

A minimalist game where beginners can discover what coding is all about and the key concepts behind code, with no explanations given. Through several series of questions, the player is led to guess the rules of this language and learn from his own mistakes.

Objective

This game is an introduction to the concept of programming. After finishing Silent Teacher, a player will not necessarily be able to write code, even basic one, but has an overview of what code is and has mastered a few basic concepts about it. Could eventually be used to get over the mental block beginners often experience when trying to understand programming or mathematical equations.

Target

For beginners who have never coded - those who always wanted to give it a try but were never brave enough to start, or else people who, out of curiosity, want to know a bit more about it (for example, to better understand the job of their partner, friend or work colleague). Warning: a minimum ability to do arithmetics is necessary, not adapted to very young children.

Specificities

No instructions, no text, the player is first presented with questions that seem like simple arithmetics, then gradually introduced to more difficult problems, and ends up understanding important concepts by trial and error.

Well adapted to people who do not feel confident or have a mental block when it comes to maths or IT and who would be put off by an explanatory text.

This also applies to the many people who develop a complex as soon as a friend or a teacher tries to explain something technical to them. Good news for them: in Silent Teacher there is nothing of all that, you are left alone to figure it all out, no one to explain anything to you, the teacher is silent !

Bonus: because there is no explanation and no text in the game, it is accessible to any player whatever his language !

Key concepts

Even if the game is quite short, it still introduces the player to most of the basic concepts of programming:

variables

different types of variables (numbers, chains of characters, Boolean algebra, tables)

the difference between assignment and comparison

functions

conditions

Which programming language ?

For the moment, Silent Teacher exists for Python and JavaScript.

A few details

Several small functionalities make it easier for the user to play the game without any instructions. A beginner will probably not notice them - and that's the whole point - but these do contribute to make the game a more pleasant experience. They include the following:

When the player's answer is incorrect, he is presented with another question of the same kind. The questions are already fixed in advance, but thanks to a random selection of numbers and letters in the case of a wrong answer, the player has to work things out by trial and error.

We deliberatelly selected low value numbers in the questions, especially for multiplications to ensure the game does not require high calculus skills. Calculus is supposed to be the reassuring aspect of the game, the one that attracts the player and makes him think : "5+6, that's easy, I can answer this!"

Some letters are not used, to avoid some confusions between letters and numbers (o / zero, l / 1, s / 5).

If the player makes more than one mistake on the same type of question, the program will ask him several times similar questions even if he answers correctly the next one, just to make sure he has really understood the concept. For this reason, someone who answers all questions correctly will be asked in total less questions than someone who keeps making mistakes.

When the player answers correctly, a big green smiley appears. When he makes a mistake, the error emoticon is more discrete. The idea is that a good answer should be promoted but that mistakes should not be strongly penalized. In the same frame of mind, there is no score displayed on the page, we don't want the player to feel he is taking an exam.

At the very end of the game, the number of mistakes is displayed: at that point, it's fine since the player has finished the game and is no longer going to be put off or feel insecure. This functionality targets more competitive players who complained about not seeing their score.

The interface is minimalist, we want players to be focused on the questions and nothing else, and once again we don't want any teacher around. When the player finishes a level, an abstract spiral shaped design appears. The player will gradually realize that it is a sort of recap of his progress. The button to access the recap only appears after the player finishes several levels.

The recap is in fact a clickable menu but this is not emphasized in any way since we prefer our player to keep answering questions one after another. He will eventually realize how to use the recap when he needs to, probably at the end of the game, if he wants to go back to previous questions.

The browser automatically saves the player's progress (without letting him know).

We have detailed statistics allowing us to know how many players get which answer wrong, how many attempts they need before they answer correctly and the average response time. This allows us to adjust the time if some questions seem too difficult to answer.

Shortcomings

We should develop a mobile app version of the game.

# data[].attributes.attachment_link.description
A minimalist game where beginners can discover what coding is all about and the key concepts behind code, with no explanations given. Through several series of questions, the player is led to guess the rules of this language and learn from his own mistakes. This game is an introduction to the concept of programming.

# data[].attributes.attachment_link.readable_text
The Pitch

Let's switch roles : this time YOU are the computer ! Read and interpret the programs to find the right trajectory and win the challenges. You will have to focus and use your intuitive abilities to understand some core concepts of programming.

Objective

This game main focus is on code reading. After finishing Compute it, you will have a good practice on how a computer reads some code. It will be a useful skill when discovering code written by other people.

But it's an essential skill while writing your own code too :

having in mind how the computer will understand it, you will make less bugs

having been in the reader's position, you will care about writing clearer code, with meaningful naming and careful spacing

Target

Suited for beginners who have never coded

Warning For Educators !

We designed "Compute it" to be usable by educators with zero knowledge, or even without educator. If you plan on using "Compute it" with a classroom or friends of yours, and if you are already comfortable with the notions we use, try not to explain too much, and let the players figure it out by themselves.

It's easier for the beginners to be introduced to abstract concepts by practicing than by using complex words. And figuring it out will reward them with a "eureka" moment, and have more impact.

We witnessed it several times in our test sessions : beginners assisted by an expert friend typically have a slower progression.

To have a positive effect as a guide : only provide small hints, and only when the player is asking for it or seems stuck.

# data[].attributes.attachment_link.description
Let's switch roles : this time YOU are the computer ! Read and interpret the programs to find the right trajectory and win the challenges. You will have to focus and use your intuitive abilities to understand some core concepts of programming. This game main focus is on code reading.