vendredi 31 janvier 2014

Coder un questionnaire interactif à choix multiple avec innerHTML [jan 2014]


Besoin pédagogique

Un "questionnaire à réponses multiples" est un outil pédagogique utile pour vérifier après la lecture d'un contenu si certains points ont bien été retenus ou compris par l'apprenant, et le cas échéant, pour apporter des éclairages supplémentaires en commentant les choix de l'apprenant.

L'expérience de l'apprenant est la suivante :
  1. l'apprenant lit le contenu
  2. l'enseignant pose une (des) question(s) à réponses multiples
  3. l'apprenant choisit une réponse
  4. l'enseignant notifie à l'apprenant si la réponse choisie est celle attendue
  5. l'enseignant apporte éventuellement des commentaires en fonction du choix.

Orientation opérationnelle
- Produire un code dont la qualité déterminante du code est de permettre une revue rapide, une évolution aisée du contenu et une reproduction simple par des fonction éditoriales immédiates telles que copier/coller/remplacer.
- Produire un code zéro bug, propre, élémentaire, modulaire et transparent.

Cinq principes de codage
- 1. Séparer le contenu pédagogique et les mécanismes pédagogiques
- 2. Encapsuler le contenu pédagogique
- 3. Documenter le design du code
- 4. Publier le document de design
- 5. Placer des commentaires dans le code même

Exercice proposé

Spécification du code
- afficher la question : "Ce billet vous a-t-il plu ?" et un bouton "OUI" un bouton "NON"
- si on clique "OUI", afficher sous les boutons "Merci pour votre participation. Bonne continuation"
- si on clique "NON", afficher sous les boutons "Merci pour votre participation. Je vous invite à me joindre pour améliorer le billet"

Eléments du design adopté
Trois méthodes pour accéder au champ "retour"
- codage d'une fonction yes() : afficher sous les boutons "Merci pour votre participation. Bonne continuation"
- codage d'une fonction no() : afficher sous les boutons "Merci pour votre participation. Je vous invite à me joindre pour améliorer le billet"
- codage d'une fonction init() : afficher sous les boutons "Ici, la retour de l'enseignant selon OUI ou NON"

Examen du code
Si vous utilisez les fonctionnalités de votre navigateur (sur Firefox,l'onglet outils/développeur web/inspecteur), vous verrez que le code est bien mélangé avec le code de Blogger. Voici ci-dessous le code essentiel qu a été écrit en mode conception/modifier/HTML dans la page de Blogger.


Pour des informations complémentaires sur le code et notamment innerHTML, je suggère de visiter le MOOC 3Wschools

Résultat de la production du code

DEBUT
Souhaitez-vous faire un don?


Ici, le retour de l'enseignant selon OUI ou NON



FIN

Note : vous ne pouvez pas faire un simple copier/coller à partir de l'écran : le code est mixé avec le code de Blogger. Il vous faut réécrire le code sous HTML dans votre environnement, Blogger, Wordpress ou autre. Pour Blogger, il faut se mettre en mode Conception/Modifier/ "HTML" au lieu du mode Conception/Modifier/ "Rédiger"

Mise à jour du 21 août 2014

Le contenu a été intégré dans un short MOOC "Coder un quiz interactif en HTML5".



 

Mise à jour novembre 2023
Le questionnaire intéractif a été intégré dans le Personal MOOC [a], un service frugal mais professionnel d'édition de MOOC élu trophée Innovation numérique par les membres du CRIP lors de la cinquième édition de IT Innovation Forum, janvier 2015. 


[a] Les technologies et services numériques intégrés dans le Personal MOOC, mai 2015
[b]Un projet de responsabilité sociale d'entreprise, Trophée innovation numérique, fev 2015

Narration sur un accompagnement musical : neuvième prise [janv 2014]

Voici la narration d'une définition originale du point que nous proposons sur un Nocturne de Frédéric Chopin.

C'est une des prises réalisées pour tester la composition entre le texte et la musique.
Pour la voix, c'est pour le moment la mienne...

Suivant notre objectifs de n'utiliser que des moyens numérique grand public, nous avons utilisé le logiciel PowerPoint 2013 du Microsoft (135€).
Comme vous l'entendrez, il y a une coupure de la musique lors d'une transition entre deux planches (Ang : slide).






Réalisation : Tru Do-Khac
Définition du point : Tru Do-Khac
Texte de la narration : Tru Do-Khac
Musique : Frédéric Chopin, Nocturne en sol mineur Op.9 N°2

Voix : Tru Do-Khac
Piano : Nicolas D.

Microsoft PowerPoint 2013
Microsoft Windows 8.1
Ordinateur portable : HP Pavillon TouchSmart

Instrument de musique : piano accoustique.

Lieu de l'enregistrement : Paris, France.

Production : Dô-Khac Decision
© Copyright Do-Khac Decision 2013

Note du 10 mars 2015
Voici le résultat final sur Le Point, la Règle et la Droite


mercredi 29 janvier 2014

Composition du texte et de la musique [jan 2014]

Le texte de la définition du point est narrée sur le Nocturne de Chopin Op. 9 N°2.


[photo du mash up à venir]

Musique : Nocturne de Frédéric Chopin Op 9 N°2
Texte : Tru Dô-Khac

Editeurs de la partition :

  • Augener Ltd, London, 1949, Augener's Edition N°6094, Chopin Nocturnes, revised by C. Klindworth and X. Scharwenka. Popular Edition
  • free-scores.com


-----------------------------------------------------------------------------------------------------

Ici, les instruments sont la photocopieuse, l'imprimante, la paire de ciseaux et le tube de colle pour réaliser un "mash up" avec la partition et le texte de la narration (collage du texte sur une photocopie de la partition).

Dans un premier temps, nous avons travaillé avec une partition publiée par Augener Ltd, London que nous avions dans nos archives.

Pour un affichage licite sur le net d'une photo du mash up, et ayant remarqué par ailleurs la présence de timbres libellés par la SEAM sur les photocopies de partition fournies par un professeur de musique, nous avons posté une demande sur le site de la Société des éditeurs et auteurs de musique (SEAM).

La SEAM a eu la gentillesse de nous rappeler.

La musique étant dans le domaine public, la SEAM nous a suggéré de s'adresser directement à l'éditeur qui détient les droits de l'expression graphique de la musique.

Recherchant alors les coordonnées de Augener Ltd London sur le net, nous sommes tombés sur free-scores.com, un site de téléchargement gratuit de partition où nous avons été heureux de trouver la partition en question sous pdf.

Cette partition étant placée sous le contrat Creative Commons Attribution Share Alike 3.0, nous sommes entrés en contact avec le site de free-scores.com pour un parfait respect de la clause d'attribution.

à suivre...


lundi 27 janvier 2014

Une chaîne de production pour l'audio (musique d'accompagnement de la narration ) [janv 2014]

La définition du point proposée par Tru Dô-Khac pour donner le sens et le goût des mathématiques au collège fait l'objet d'une narration sur un extrait du Nocturne de Frédéric Chopin en sol mineur (Op 9 N°2).

Nous avons enregistré l'extrait choisi. Nous vous invitons à l'écouter ci-dessous.




Compositeur
Musique : Frédéric Chopin (Op 9 N°2)

Interprète 
Piano : Nicolas D.

Lieu d'enregistrement
Paris, France.


La chaîne technologique est la suivante :

[graphique à venir]

PowerPoint 2013, Microsoft, téléchargé licence payante
Ordinateur portable HP Pavillon, CPU, 1?5 Ghz, 64 bits, 4 GO RAM sous Windows 8.1.
Google Sites, service Cloud accès gratuit
Blogger, Google, service Cloud accès gratuit

Avec cette chaîne technologique, nous avons :
  • édité le texte sur une planche (Powerpoint onglet Accueil ),
  • enregistré le morceau de musique ( Powerpoint onglet  Diaporama ),
  • converti le fichier ppt en fichier en vidéo mp4 (Powerpoint onglet  Fichier/Exportation)
  • déposé la vidéo sur le Cloud (Google Sites / page Classeur)
  • codé l'activation de la vidéo sur le Cloud (Blogger / billet avec HTML 5 video)
Lors de l'exportation vidéo avec Powerpoint, trois niveaux de qualité sont proposées  : 
  1. "HD et ordinateur"  (écran 1172 x 720)
  2. "Internet et DVD" (écran 784 x 480)
  3. "Mobile" (écran 392 x 240)
La qualité "Internet et DVD" a été choisie ici : pour une durée de narration de 2:04, le résultat est un fichier mp4 d'une taille de 5,8 méga octets.

Pour l'intégration de la video dans Blogger sous HTML5, voici le code

<video width="600" height="333" controls="controls">
  <source src="https://sites.google.com/site/testclassroomtdk/home/library/KKBB%2001%20V1.1.mp4?attredirects=0&d=1" type="video/mp4" />
</video>

Le code est "propre". Ne figurent que les instructions strictement nécessaires dans l'environnement Blogger pour produire la video.
Pour des informations complémentaires sur le code, le mini MOOC sur HTML5 video par W3Schools.


lundi 20 janvier 2014

Une chaîne de production pour l'animation (flash) [jan 2014]

Comme annoncé, voici ce lundi une première animation muette, qui est celle de la définition du point.

Mise à jour mars 2022 : 

Ces études ont été menée en janvier 2014, précisément le mois où le site France Université Numérique aujourd'hui FUN MOOC mettait en ligne ces trois premiers MOOC [1]. La technologie a depuis bien évolué et malheureusement les modules et services logiciel de tiers utilisés ne sont plus opérationnels. 

Le site Fun MOOC relevait et relève d'une logique de centralisation, ce qui oblige les auteurs à se soumettre aux conditions techniques, administratives et financières du producteur Fun MOOC.  Notre projet (que l'on a désigné par la suite par "Personal MOOC") relève d'une logique d'indépendance à l'instar de l'auto-édition.

Voici néanmoins le code 

<object data="https://sites.google.com/a/.../classeur/point.swf" style="height: 400px; width: 560px;" type="application/x-shockwave-flash">
<param name="base" value="https://sites.google.com/a/.../classeur/Diapositive%201.swf" />
<param name="movie" value="https://sites.google.com/a/.../classeur/Diapositive%201.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="menu" value="true" />
</object>

[1] Table ronde sur les MOOCs de Polytechnique, X-Open-Innovation, nov 2013

point.swf




Note :
des incidents intermittents avec la technologie Flash ont été relevés avec le navigateur Firefox 26.0

Animation de secours

La présente chaîne ne répond pas au cahier des charges du mini MOOC, notamment par le non support de la voix.
Elle doit donc évoluer. La productivité et la créativité des auteurs de contenu est notablement liée à l'outil et à sa maîtrise, plusieurs scénarios seront étudiés en vue d'une optimisation opérationnelle, financière et juridique.

Nous restons à l'entière écoute pour des suggestions de solution alternative ou complémentaire.


Schéma de la chaîne


Composants de la chaîne technologique
  • Powerpoint 2003 de Microsoft, logiciel téléchargeable, sous licence payante
  • iSpring de iSpring, logiciel téléchargeable, licence gratuite avec des fonctionnalités limitées
  • Blogger de Google, accès au service gratuit
  • Google Sites, accès au service gratuit
Avec cette chaîne, nous avons :
  • édité le graphique sur une planche (Powerpoint),
  • animé le graphique  (Powerpoint),
  • converti le graphique animé en animation en fichier flash (iSpring)
  • déposé le fichier flash sur le Cloud (Google Sites / page Classeur)
  • codé l'activation de l'activation du fichier flash sur le Cloud (Blogger / <object>)

Le code dans Blogger est le suivant :

<object data="URL" style="height: 400px; width: 560px;" type="application/x-shockwave-flash">
<param name="base" value="URL" >
<param name="movie" value="URL" >
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="menu" value="true" />
</object>


Ce code n'est probablement pas "propre" : une optimisation pour ne mettre que des instructions strictement nécessaires sera réalisée ultérieurement si la collecte de dons est atteinte : pour soutenir financièrement la démarche d'innovation collaborative et ouverte, c'est ici avec un leader européen de crowdfunding.

Support technique
  • MOOC pour programmer les technologies web  : W3schools
  • MOOC pour programmer les technologies web : Codecademy

Que ce soit pour les logiciels téléchargés et les services Cloud, nous conseillons de lire attentivement les conditions d'utilisation et d'en évaluer la portée opérationnelle par rapport à votre contexte d'éditeur de MOOC.



La chaîne a été conçue en fonction de notre contexte propre, notamment en termes de
  • maîtrise antérieure d'utilisation de certains outils ( le coût relatif au contenu est le plus important)
  • principe d'indépendance vis-à-vis des fournisseurs (réversibilité et positionnement stratégique)
  • contraintes budgétaires (retour sur investissement de l'infrastructure courante).
D'autres critères ont été pris en compte, notamment
  1. nos objectifs de réactivité de la chaîne,
  2. nos contraintes de coûts et délais de prise en main des outils (l'appel à dons est borné à 35 jours et se termine le 18 février),
  3. nos objectifs d'indépendance par rapport à un fournisseur ou prestataire (réversibilité et positionnement stratégique),
  4. le retour des investissements déjà réalisés (matériel et logiciel),
  5. les coûts de production (redevance de service cloud),
  6. nos objectifs de qualité de service, 
  7. nos objectifs de sécurité numérique,

samedi 18 janvier 2014

Premier soutien "Contributeur" [jan 2014]

Le projet accueille son premier soutien "Contributeur", Didier Tranchier, Coach at Stanford University.

Profil sur Linkedin.

Pour rejoindre le KissBanker Didier et soutenir "Le Point, la Règle et la Droite", cliquez ici.

Premier soutien "Supporter" [jan 2014]

Le projet accueille son premier soutien "Supporter", Eric Collery, Chief Information and Technology Officer

Profil sur Linkedin.

Pour rejoindre le KissBanker Eric  et soutenir "Le Point, la Règle et la Droite", cliquez ici.

Conception d'une planche : premières étapes [jan 2014]

Publier une planche demande plusieurs étapes, associées chacune à un ou plusieurs livrables.

Pour la définition du "point", nous en montrons ci-dessous quelques unes :
  • tâches antérieures
  • formuler l'élément mathématique 
  • imaginer une trame de scénario
  • dessiner le graphique
  • animer le graphique
  • tâches postérieures

Formuler l'élément mathématique

Vous êtes invités à consulter les définitions proposées par d'autres sites, notamment


Imaginer une trame de scénario

Dessiner le graphique



Animer le graphique (à suivre)





Premier soutien "Sympathisant" [jan 2014]

Le projet accueille son premier soutien "Sympathisant", Yves Lehmann, consultant et business angel.

Profil sur Linkedin.

Pour rejoindre le KissBanker Yves  et soutenir "Le Point, la Règle et la Droite", cliquez ici.

vendredi 17 janvier 2014

Le Cercle Les Echos : "MOOC d'entreprise pour l'entreprise numérique apprenante" [jan 2014]

Publié sur Le Cercle Les Echos le 14 janvier 2014, "MOOC d'entreprise pour l'entreprise numérique apprenante" dépasse les 2000 visiteurs uniques et figure parmi les cinq "Articles les plus lus aujourd'hui" du site Le Cercle.

Accès à l'article

jeudi 16 janvier 2014

Lancement du site "Le Point, la Règle et la Droite" [jan 2014]

Publié en décembre dernier, le rapport PISA 2012 (Programme for International Student Assessment) qui mesure "ce que les élèves à 15 ans savent et ce qu'ils peuvent faire avec ce qu'ils savent", classe la France à la 25ème place en mathématiques sur un panel de 65 pays mesurés [1].

Nous confessons que ce classement nous a, dans un premier temps, étonné et  peiné : ancien élève du lycée Louis-Le-Grand et de l'Ecole Polytechnique, nous avons bénéficié pleinement de l'éducation républicaine.

Puis, ce classement nous a inquiété et nous avons ressentis une injonction à agir.

Nos activités professionnelles nous en donnant l'opportunité, nous avons imaginé un projet portant à la fois une vision pédagogique et une vision opérationnelle :
  • donner aux enfants "le sens et le goûts de maths au collège", 
  • aider les enseignants à éveiller les capacités insoupçonnées d'abstraction et de logique des enfants, 
  • contribuer à une réponse aux signaux envoyés par le rapport PISA 2012,
  • démocratiser les cours ouverts à toutes et tous (massive open online course "MOOC") en donnant aux acteurs de la chaîne sachant/enseignant/apprenant/exerçant un MOOC quasi gratuit mais de qualité professionnelle grâce à un design robuste et des composants exclusivement grand public
  • concevoir en innovation collaborative et ouverte un MOOC organique. 

Ce 16 janvier, six établissements ouvrent leur premier MOOC sur la plateforme France Université Numérique.

Parmi ceux-ci, deux adressent le numérique et un, les sciences exactes :
  • Introduction aux technologies des médias interactifs numériques (CNAM)
  • Comprendre le transmédia storytelling (Université Bordeaux)
  • Fondamentaux en statistique (Centre Virchow-Villermé).

Dans le sillage de ces institutions, nous lançons le site "Le Point, la Règle et la Droite" pour porter un "mini MOOC".

Ce mini MOOC a pour objectif de tester l'appétence et la pertinence de notre vision.

Dans une démarche d'innovation collaborative et ouverte, nous lançons trois sites :
  • "Le Point, la Règle et la Droite" , un site AlphaTest du site destiné aux élèves souhaitant un éclairage de l'enseignement prodigué par leur intituteur/rice / professeur/e  
  • "Pour le sens et le goût des maths au collège", le présent site, qui a pour objet de concevoir et mettre à disposition une chaîne de production MOOC composées exclusivement de moyens grand public
  • La partition du site d'un leader européen de crowdfunding en dons  [2] qui, en regard des objectifs citoyens et du contenu artistique du projet, a accepté de le soutenir notre projet.
La partition du site de crowdfunding apporte des informations complémentaires en décrivant notamment :
  • le livrable du projet
  • les parties prenantes, à savoir : les élèves, les parents, les enseignant(e)s, les personnalités politiques
  • la nature des travaux à réaliser
  • le coût estimé des différentes travaux
  • le montant visé par l'appel à dons pour couvrir les coûts
  • la durée de la collecte
  • le niveau des contreparties promises aux donateurs.
  •  
Trois questions/réponses sont également publiées :
  1. Ce contenu est-il vraiment différent des contenus observés sur d'autres sites, notamment de soutien scolaire ? 
  2. Pourquoi le montant de la contrepartie de "120€" est-il supérieur à celui de la contrepartie "45€" alors que l'on ne bénéficie pas pour la contrepartie "120€" d'une publication ?
  3. Quel est le régime de droit d'auteur des œuvres créées dans le cadre de ce projet ?


[1] Principaux résultats de l’Enquête PISA 2012 - Ce que les élèves de 15 ans savent et ce qu’ils peuvent faire avec ce qu’ils savent" , OCDE, 2 décembre 2013, page 7. 
[2] Mini MOOC : "Donner le sens et le goût des maths au collège", archives sur le site de crowdsourcing KissKissBankBank