initiation à la programmation cycles 3 &...

banque de ressources numériques éducativesinitiation à la programmation cycles 3 & 4

Entre 8 et 15 ans ? Apprends à programmer tes jeux !

Association Colombbus10 rue du terrage - 75010 paris01 85 09 11 14

DirecteurBenoit [email protected]

chef de projetLise Teissier du [email protected]

3

introduction | 4

création d’un compte | 5

ressources pédagogiques | 6 accéder au parcours l’écran de l’exercice

- en cas d’erreur dans le code soumis - l’exercice est réussi

les parcours

création de jeux | 11 Mode d’affichage du code mode visualisation de l’exécution mode construction la médiathèque le wiki exemples

animation | 15 onglet descriptif onglet membres onglet progression

- suivi chronologique- suivi dans l’ordre du parcours

Forum | 19

sommaire

4

declick est le Fruit de l’expérience cumulée de colombbus et France ioi.colombbus est une association visant à former et éduquer au numérique. Depuis 2006, elle conçoit et anime des ateliers de création numérique pour les jeunes, à l’aide d’une interface de programmation et d’exécution appelée tangara, développée par l’association elle-même. Au fil des années, les jeunes ont montré un grand intérêt pour cet apprentissage menant à la réalisation de leurs propres programmes, lors de projets collectifs. certains, en situation de décrochage scolaire, y ont même trouvé un terrain d’expression inexistant dans les autres matières, ce qui a mené colombbus à se servir de tangara pour des actions de remobilisation. courant 2015, l’association s’est jointe à France ioi pour créer la plateforme Declick, dans le prolongement de tangara.

France ioi est une association qui organise des concours d’informatique et d’algorithmique, notamment le concours castor. son savoir-faire en matière de soumission d’exercices d’algorithmique et de programmation en ligne était complémentaire à l’expérience pédagogique de colombbus.

Les deux associations ont donc uni leurs efforts pour mettre en œuvre Declick qui, au cours de l’année 2015-16, a été utilisée par 350 élèves de primaire en ateliers périscolaires et 250 collégiens.

introduction

declick est une plateForme d’initiation à la programmation destinée aux enFants du primaire et du collège. elle enseigne de façon ludique et progressive les premières notions de programmation écrite, dans un langage inspiré de java et javascript. pas à pas, les élèves acquièrent les connaissances qui leur permettent de créer et déplacer des objets, réaliser un décor, introduire des conditions, créer des boucles, gérer des événements et leurs conséquences… dans le cadre de jeux simples. les commandes étant écrites et précises, la rigueur est de mise, sans quoi les étapes des parcours pédagogiques ne peuvent être validées. la programmation est en effet un exercice qui ne laisse pas de place à l’à peu près.

Une fois ces premières notions acquises, l’élève peut réaliser ses propres jeux, seul ou en groupe, grâce à une interface de création conçue à cet effet, en composant à partir d’une bibliothèque d’objets existante. il y visualise instantanément le résultat de sa programmation. à force d’essais et erreurs, il construit son programme.

les enseignants et animateurs disposent d’outils qui leur permettent de suivre la progression des élèves réunis en groupes, et de trouver des réponses aux questions qui peuvent surgir, par l’intermédiaire d’un forum.

5

création d’un compte

les utilisateurs sont invités à se créer un compte ou à se connecter lors de l’utilisation de declick.pour l’apprenant, utiliser un compte lui permet de conserver son historique de progression dans les parcours et ses propres réalisations dans l’espace créatif. l’enregistrement avec une adresse email n’est pas obligatoire. il permet néanmoins la récupération du mot de passe en cas de perte.pour l’enseignant ou l’animateur, le compte est la porte d’entrée vers les fonctionnalités d’animation des groupes.

1

2 3 4

6

ressources pédagogiques

les diFFérents parcours sont disponibles dans l’onglet « Progresser ». Les parcours officiels sont réalisés par les concepteurs de Declick, sur la base de l’expérience pédagogique acquise au fil des années. les parcours personnalisés sont soit des déclinaisons des parcours officiels, proposant d’autres progressions à partir de la banque d’exercices disponibles, ou pourront à terme être constitués d’étapes réalisées par des contributeurs tiers.

chaque parcours est présenté par son nom et une courte description de son objectif. à l’activation de la petite flèche apparaissent les compétences abordées :

7


l’ensemble du parcours est présenté sous forme de chemin de progression linéaire, divisé en chapitres numérotés et dont les titres apparaissent : la navigation sur le parcours s’effectue à la souris, comme pour la navigation sur une plateforme cartographique : la molette (ou le trackpad) permet de zoomer/ dézoomer, le pointeur permet de se déplacer.

accéder au parcours

Declick zoome automatiquement sur un chapitre si on clique sur son titre. les intitulés des étapes apparaissent automatiquement dès que le niveau de zoom en permet la lecture.

si un exercice a déjà été ouvert, le point correspondant sur la carte est marqué en orange. si l’exercice est validé, il est marqué en vert.

pour accéder à un exercice, il faut cliquer sur le point correspondant. le pictogramme du robot Declick indique le dernier exercice visité.

8

ÉNONCÉ

Ajoutons un maçon

ÉNONCÉCRÉER UN MAÇON

pour créer bob le robot, tu avais utilisé : bob= new robot()sauras-tu créer un maçon qui s’appelle max

1


l’aiguille permet à l’utilisateur de retourner sur la carte du parcours et ainsi de se situer dans sa progression.

les instructions de l’exercice à réaliser.

les deux barre horizontales permettent d’agrandir la zone des instructions.

zone d’écriture du code.

flèche d’exécution du code qui permet de vérifier ce que le code écrit produit comme résultat.

l’écran d’exercicel’écran d’exercice occupe tout l’espace.

zone d’exécution du code.

flèche circulaire qui permet de remettre l’exercice dans son état initial

9


ÉNONCÉ

Ajoutons un maçon

ÉNONCÉ CRÉER UN MAÇON


1 max = new Robot()

il faut créer un maçon

un message apparaît ; il donne des indications sur l’erreur produite.

ÉNONCÉ

Ajoutons un maçon



1 max = new Maçon()


ÉÉ

pour créer bob le robot, tu avais utilisé :bob= new robot()sauras-tu créer un maçon qui s’appelle max

1 max = new Maçon()

BRAVO TU AS RÉUSSI !

ÉTAPE SUIVANTE

flèches ‘suivant’ et ‘précédent’ sont toujours visibles pour naviguer entre les exercices.

si le code est correct, la fenêtre s’affiche

permet de passer à l’exercice suivant.

en cas d’erreur dans le code soumis

l’exercice est réussi

10

les parcours

BoB & maxce parcours est conçu pour l’initiation à la programmation des jeunes du cycle 3, tout en étant également une bonne introduction pour un public plus âgé.Divisé en 6 chapitres, et regroupant un total de 53 exercices, il enseigne à l’utilisateur comment créer un petit jeu de plateforme avec un personnage. il aborde diverses notions qui figurent au programme : la création et l’utilisation d’objets, l’appel de leurs actions, la gestion des paramètres textuels ou numériques, la répétition des actions grâce aux boucles et les conditions.

D-clics nUmériqUesce parcours est une adaptation de Bob & max réalisé pour la ligue de l’enseignement : son programme de formation ‘D-clics numériques’ vise à initier les enfants de 8 à 14 ans en milieu périscolaire.

Zoé et les Fantômesce parcours est conçu pour l’initiation à la programmation des jeunes du cycle 4. il n’est pas nécessaire d’avoir réalisé le parcours Bob & max pour entamer celui-ci.il enseigne à l’utilisateur comment créer un jeu avancé avec plusieurs personnages.il aborde les notions suivantes : la création et l’utilisation d’objets, l’appel de leurs actions, la gestion de paramètres textuels ou numériques, la répétition des actions grâce aux boucles, les conditions, l’utilisation de variables, la gestion des événements.

castorce parcours est conçu pour introduire l’algorithmique aux jeunes du cycle 4. par l’intermédiaire de 29 problèmes à résoudre, issus des exercices et parcours castor et regroupés en 4 catégories, sont introduites diverses notions de logique et d’algorithmique.

D’autres parcours seront ajoutés progressivement.


11

Créer

Créez un nouveau programme ou ouvrez-en un pour pouvoir l’éditer

Mon projet

nouveau 1*

création de jeux

l’espace créatiF oFFre un espace de création de jeux vierge, où les jeunes peuvent concevoir leurs propres applications en Faisant appel aux connaissances acquises dans les parcours.

les outils de l’interface y sont légèrement différents, dans la mesure où les instructions disparaissent et où l’exécution du code se produit dans une interface que l’utilisateur doit activer.

le menu permet d’accéder aux projets créés et sauvegardés (nécessite l’existence d’un compte declick).

actionner alternativement la visualisation de l’exécution du code (oeil) et l’éditeur code (bloc note).

déployer la boite à outils où se trouvent les fichiers programmes déjà sauvegardés

accéder à la médiathèque dans laquelle l’utilisateur peut stocker des éléments multimédias pour personnaliser ses jeux(cf p13).

zone d’écriture du code

mode aFFichage du code

créer et ajouter un nouveau fichier programme

sauvegarder le programme en cours. tant qu’il ne sera pas sauvegardé, le nom

du programme dans la colonne gris foncé apparaît avec une astérisque.

exécuter le code supprimer le fichier programme sélectionné

afficher des indications sur les fonctionnalités

disponibles dans cet outil

ouvrir le wiki (cf p14) qui répertorie les objets à disposition dans declick, ainsi que d’autres informations sur le fonctionnement de l’espace créatif.

12

«bob» n’est pas défini«newMaçon» n’est pas défini

Mon projet

Créer

création de jeux

mode visualisation de l’exécution

actionner alternativement la visualisation de l’exécution du code (oeil) et l’éditeur code (bloc note).

accéder à la console où l’utilisateur peut rédiger des commandes puis les exécuter immédiatement en cliquant sur

réinitialiser l’environnement d’exécution : efface l’historique du code et l’exécution correspondante

mode construction

zone d’exécution

historique du code

la console apparaît au clic sur

bob.définitionPosition(225,197)

Mon projet

Créer

248,223

accès au mode construction

le quadrillage permet de positionner les objets en les déplaçant simplement dessus, et de récupérer les commandes avec les coordonnées, ce qui permet de les insérer dans le code.

13

création de jeux

Créer

Mon projet

+ Ajouter des fichiers

1_basique.png montgolfiere.png montgolfiere25.png

pique.png

en cliquant sur le pictogramme d’une image, celle-ci apparaît en superposition de l’écran.

la médiathèque

ajouter des fichiers image et son en les glissant et déposant dans la zone ou en les sélectionnant depuis son répertoire de fichiers


Créer

Mon projet



pique.png



pique.png

montgolfiere25.png (236x292)

Créer

Mon projet



pique.png



pique.png

l’utilisateur peut modifier l’image en cliquant sur l’éditeur

dupliquer l’image

14

création de jeux

le wiki

Créer

Mon projet



pique.png

le wiki, accessible depuis , détaille le fonctionnement de declick. l’environnement y est décrit fonctionnalité par fonctionnalité. les objets sont présentés accompagnés des commandes qui leur sont associées, et quelques exemples sont à la disposition de l’utilisateur s’il a besoin d’inspiration ou d’être guidé.

exemples

Dans la page ‘Découvrir’, sont accessibles différents jeux réalisés dans le cadre d’ateliers scolaires et périscolaires dans le courant de l’année 2015-2016. ils montrent un échantillon de réalisations possibles avec les notions et les commandes enseignées dans le parcours Bob & max.

15

animation

la section ‘animation’ a été réalisée dans le but de Faciliter le suivi de la progression d’un groupe d’utilisateurs. à l’aide d’un seul écran, les enseignants et les animateurs peuvent visualiser l’avancée du groupe dans son ensemble aussi bien qu’élève par élève.

l’accès à cette section nécessite d’être connecté et se fait depuis le pied de page.

Dans cet espace d’animation vous pouvez constituer des groupes puis les administrer en leur assignant un parcours à réliser. Vous avez également accès à un forum pour interagir avec l’équipe Declick.

Groupes

créer un nouveau groupe :

consulter groupe :

Entrez le nom du nouveau groupe

test

DÉCOUVRIR PROGRESSER CRÉER SE DÉCONNECTER

animateur connecté

entre 8 et 15 ans ?apprends à programmer des jeux !

l’utilisateur doit avant tout créer un groupe ou si des groupes existent déjà, cliquer sur celui dont il souhaite voir la progression.

Nom du groupe

Type

Description Ce champ est disponible si vous souhaitez ajouter une description à ce groupe

NiveauIndiquez le niveau du groupe

Sélectionnez le type de groupe

Indiquez le nom que vous souhaitez donner à votre groupe

classe

ENREGISTRER

indéfini

test

Description

MEMBRESDESCRIPTIF PROGRESSION ADMINISTRATION

Supprimer le groupe

Groupes


animateur connecté


L’interface dispose de différents onglets. La page qui s’affiche par défaut à l’arrivée de l’utilisateur, ‘Descriptif’, lui permet de renseigner la fiche d’identité du groupe :

onglet descriptiF

16


Groupes


animateur connecté


bonpra ()

animation

pour composer un groupe, l’enseignant peut ajouter les utilisateurs un par un en indiquant leur identifiant, en demandant aux utilisateurs de renseigner le code d’inscription délivré par la plateforme ou en acceptant des demandes d’adhésion spontanées.

l’onglet ‘membres’ permet de créer le groupe ou de visualiser comment il est composé

dans la zone réservée aux utilisateurs invités apparaissent les noms d’utilisateurs à qui une invitation a été envoyée et qui n’a pas encore été acceptée.

onglet membres

onglet progression

c’est l’onglet ‘progression’ qui permet à l’enseignant de suivre la progression de son groupe d’élèves.

il doit tout d’abord choisir le type de visualisation des résultats : chronologique s’il souhaite suivre les soumissions dans l’ordre suivi par les utilisateurs, ou suivant l’ordre du parcours s’il veut observer la progression dans l’ordre des exercices imposé par le parcours.

animation

dans le cas du suivi chronologique


Groupes


animateur connecté


le code couleur de la case indique si l’utilisateur a validé l’exercice , soumis une solution qui est validée mais avec un score partiel , soumis une solution erronée , lu l’exercice sans soumettre de solution ou pas encore ouvert l’exercice . dans la case indiquant le type de soumission se trouve un pictogramme de code , cliquable qui ouvre dans une fenêtre en superposition le code soumis à cette étape-là.

l’enseignant doit choisir le parcours suivi par le groupe

1 2puis sélectionner un utilisateur s’il veut en suivre la progression

18

dans le cas du suivi dans l’ordre du parcours

animation

l’enseignant a le choix de visualiser la progression de façon globale (seules les couleurs indiquent l’état de progression des membres du groupe) ou de façon détaillée. l’affichage des descriptions ouvre une colonne de description des exercices.


Groupes


animateur connecté


la date de la dernière activité

le temps écoulé depuis la première lecture le nombre d’indices

demandés (fonctionnalité encore indisponible pour les utilisateurs)

le score le nombre d’essais de solutions soumis

le code soumis à ouvrir dans une fenêtre en superposition

Dans le cas du suivi dans l’ordre du parcours chaque case à l’intersection d’un utilisateur et d’un exercice indique :

19

Forum

l’accès au forum se situe dans le pied de page de Declick. c’est un espace dans lequel les enseignants et animateurs peuvent soumettre leurs demandes d’assistance, le renseignement

d’erreurs constatées sur la plateforme, et leurs suggestions d’amélioration de Declick. il faut être connecté pour pouvoir écrire sur le forum.

Forum


animateur connecté


des questions ? contactez-nous !par mail à

[email protected]

sur twitter à@declick_net

initiation à la programmation cycles 3 &...

Documents