Le Fizz-Buzz, le test d'embauche à la mode

Comment choisir un développeur ?

Cette question, beaucoup de recruteurs se la posent...

Il existe, bien sûr, la sélection sur CV, à l'ancienne, sans aucune garantie que le candidat sera compétent.

Depuis quelques temps maintenant, les concours pratiques ou tests techniques se sont démocratisés. Ces tests apportent une meilleure garantie sur les compétences du candidat.

Parmi ces tests, le Fizz-Buzz

Fizz-Buzz ? Kesako ?

Le test Fizz-Buzz est issu d'une méthode permettant d'apprendre les divisions aux enfants.

Pour les nombres entre 1 et 20 :

si le nombre est divisible par 3 : on écrit Fizz
si le nombre est divisible par 5 : on écrit Buzz
si le nombre est divisible par 3 et par 5 : on écrit Fizzbuzz
sinon : on écrit le nombre

Pourquoi utiliser ce test en recrutement ?

Le candidat développeur est soumis à ce test sous la contrainte du chronomètre, avec le choix du langage à utiliser et les nombres à traiter en règle générale de 1 à 100.

Il est convenu qu'un bon développeur mettra moins de 15 minutes pour délivrer un code de qualité. Un candidat qui dépasserait ce temps serait, de fait, disqualifié.

Un exemple en javascript

Si vous souhaitez travailler sur le code, ne lisez pas la suite.

Dans le cas contraire, voici un exemple de Fizz-Buzz infini en javascript.

Commençons par le code HTML

<!-- Une div vide qui accueillera les nombres -->

<div id="contenu" class="row"></div>

Nous allons ensuite faire de la mise en forme en CSS (facultative mais elle permet de faciliter la vérification)

/* Sépare la ligne en colonnes */

.row{

  display: flex;

  flex-wrap: wrap;

}



/* Formate les colonnes pour en faire des carrés */

.col{

  width: 75px;

  height: 75px;

  text-align: center;

  background-color: #f44336;

  box-sizing: border-box;

  padding: 10px;

  margin: 10px;

  color: white;

}



/* Couleurs spécifiques pour les cases Fizz-Buzz */

.fizz{

  background-color: #4CAF50;

}

.buzz{

  background-color: #607d8b;

}

.fizz.buzz{

  background-color: #ff9800;

}

Et enfin, le javascript, qui va faire tout le travail.

A noter que j'utilise des conditions ternaires pour raccourcir l'écriture, dont voici l'explication

// Cette ligne avec une condition ternaire

contenu += (i%3 == 0) ? "fizz " : "";



// Sera équivalente à

if(i%3 == 0){

    contenu += "fizz ";

}else{

    contenu += "";

}

Passons au code du Fizz-Buzz

// Variables globales

var i = 1;

var contenu = "";



$(function(){

  // Lancement du 1er lot (de 1 à 100)

  fizzBuzz(i);



  // Détection du défilement pour ajouter un nouveau lot de nombres

  $(document).on("scroll", scrolled);

});



// Fonction lancée quand on défile

function scrolled(){

  // Si on est en bas de l'écran

  if($(document).scrollTop() + $(window).height() >= $(document).height()){

    // On ajoute 100 au 1er nombre du lot

    i+=100;



    // On lance le lot

    fizzBuzz(i);

  }

}



// Fonction d'affichage des lots de nombres

function fizzBuzz(j){

  // On boucle sur tous les nombres du lot

  for(var i=j; i<=j+99; i++){

    // On écrit fizz si le nombre est divisible par 3 (le modulo 3 donne un reste nul)

    contenu += (i%3 == 0) ? "fizz " : "";



    // On écrit buzz si le nombre est divisible par 5 (s'ajoute au fizz si il a déjà été écrit)

    contenu += (i%5 == 0) ? "buzz" : "";



    // On écrit le nombre si contenu est vide

    contenu += (contenu == "") ? i : "";



    // On écrit le nom des classes à appliquer

    classe = contenu + " col"



    // On affiche le contenu

    $("#contenu").append("<div class='"+classe+"'>"+contenu+"</div>");

    contenu = "";

  }

}

Voilà, si vous voulez voir le résultat, c'est ci-dessous.

https://codepen.io/nouvelletechno/pen/bJvwNG

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat