Outils pour utilisateurs

Outils du site


atelier:fizzbuzz_js

S'initer à JavaScript avec un jeu collaboratif

Une ou développ⋅euse⋅eur confirmé⋅e lance l'idée de s'amuser avec deux ou trois personnes présentes afin de monter en compétence dans l'écriture et la compréhension des du langage JavaScript

  • La personne qui initie et anime de jeu exerce ses capacités padégogiques
  • Les apprenant⋅e⋅s élèvent leur niveau de pratiques numériques
  • le format court et ludique interpelle les personnes passant dans le même espace (Développ⋅euse⋅eur ou non inititié⋅e) qui demandent à leur tour d'essayer l'exercice

Ce test/exercice est inspiré d'un jeu pour enfant en colonie de vacances (Cf la toile scoute Fizz Buzz)

Contexte technologique de l'initation

Le “test Fizz - Buzz” est souent utilisé lors d'entretien d'emploi, il est conçu pour aider à filtrer des candidats à la programmation. Le cahier des charges de l' attribution de programmation est le suivant:

« Ecrire un programme qui imprime les numéros de 1 à 100. Mais pour des multiples de 3 print“ Fizz ” au lieu du numéro et pour les multiples de 5 print“ Buzz ” . Pour les nombres qui sont des multiples de 3 et 5 print“ FizzBuzz.” »

Lancer le Jeu

Challenge annoncé à voix haute : Le but est d'écrire un tel programme en moins de 10 minutes

  • Un ordinateur par participant⋅€
    • une invite de commande
    • un éditeur de text (ex: atom, ou sublime texte ou vim )

OU

Expliquer la règle

Pour les multiples de 3, il faudra remplacer le nombre par Fizz. Pour les multiples de 5, il faudra remplacer le nombre par Buzz. Pour les multiples et 3 et de 5, il faudra remplacer le nombre par FizzBuzz.

Cela donne en commentaire d'introduction dans le code :

// Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”

L'animateur ou nimatrice de la séance rédige en expliquant la syntaxe :

function fizzbuzz (number) {
    if (number 3 === 0 && number 5 === 0) {
        console.log('FizzBuzz')
    }

Puis l'animateur ou animatrice demande aux participant⋅e⋅s de prédire à voix haute le résultat lorsqu'ils rédigent un nombre.

Exemple : “Je pense que le print sera Fizz si j'écris 33”

La ou le participant⋅e rédige la commande :

Fizzbuzz(33)
// Le résultat qui s'affiche est alors : => False

Droit à l'érreur

L'animateur invite alors les participants à se concerter sur la provenance de l'erreur

Cet exercice peut être perçu comme utile pour estimer les programmeurs étant capable de penser par eux-mêmes face à ceux ayant une tendance copier-coller la solution d'un autre. Laisser les participants penser par-eux mêmes

Dans un esprit de Do-ocratie, apprendre par le faire est un axe essentiel lors de cet atelier. Le droit à l'erreur fait partie du processus d'apprentissage et est inaliénable.

Cela permet l'autonomisation dans les usages et la prise de confiance de la pratique.

Les participants sont conviés à rédiger individuellemnt ou collaborativement des rédaction en javascript pour corriger l'erreur observée et tendre vers l'atteinte de l'objectif fixé en début d'atelier. Le principe de prédire à voix haute le résultat de l'opération avant de lancer l'éxecution est toujours valable.

L'animateur peut aider la progression par quelques nouveaux mini challenges, exemple :

  • Commencer par réaliser le challenge avec les multiples de 3 comme unique condition
  • Puis avec les multiples de 3 en condition première et les multiples de 5 en condition seconde
  • changer les multiples 3 et 5 par 3 et 8
  • Si condition 1 remplie = Fizz , si condition 2 remplie = Buzz , si condition 1 et 2 remplies = Bingo
  • remplacer les chiffres par 'Hello' et observer ce qui se passe

Après découverte des subtilités de la syntaxe propre à JavaScript, les participants doivent, seul ou en groupe, rédiger une solution la plus simplement rédigée et commentée au challenge intiale posé dans le temps le plus court possible.

Répéter la séance quelques jours plutard avec le même groupe permet de consolider les acquis.

Un exemple de solution

function fizzbuzz (number) {
    if (number % 3 === 0 && number % 5 === 0) {
        console.log('FizzBuzz')
    }
    else if (number % 5 === 0) {
        console.log('Buzz')
    }
    else if (number % 3 === 0) {
        console.log('Fizz')
    }
    else {
        console.log(number)
    }
}
fizzbuzz(1)
// => 1
fizzbuzz(1)
// => 2
fizzbuzz(3)
// => Fizz
fizzbuzz(5)
// => Buzz
fizzbuzz(15)
// => FizzBuzz
A NOTER:
  • Plusieurs solutions à ce test existent
  • Plusieurs variantes à la règle de base peuvent être testées
  • Ce test existe dans de nombreux autres langages de programmation

Ressources pour progresser

atelier/fizzbuzz_js.txt · Dernière modification : 2021/08/06 10:49 de xavcc