Sommaire: Vous pouvez éditer le fichier  report.html pour changer l’apparence de la page “Printed Results” (Résultats imprimées).
Difficulté: Moyen

Personnalisé avec aisance en Quizmaker ’09

Si vous avez acheté ou testé le nouveau Articulate Quizmaker ’09, vous aurez vu à tel point on peut désormais personnaliser l’apparence des quizs. Le modèle rigide où vous pouviez seulement changer les couleurs et le texte a disparu. Quizmaker ’09 vous permet maintenant de placer presque tout objet sur le diapo et vous pouvez donc choisir exactement l’apparence de votre quiz. Mais il y a toujours un elément du quiz qui ne peut pas être changer, la page imprimée des résultats.

Lorsque vous créez votre quiz, vous avez l’option de permettre à l’utilisateur d’imprimer leurs résultats à la fin du test. Nous avons vu récemment (en anglais) comment on pouvait changer le report.html dans les fichiers publiés de Quizmaker pour changer le contenu du rapport.
Pourquoi changer le rapport? Il y a plusieurs raisons. Peut être vous ne voulez pas avoir autant d’informations dans le tableau. Vous voulez juste savoir si l’étudiant à réussi ou non le test, et vous avez besoin juste d’un score final. Enfin, vous ne voulez pas montré les réponses correctes afin que l’étudiant puisse éssayer le quiz à nouveau.

Dans cet article, nous allons regarder les changements que nous pouvons effectuer dans ce rapport, et revoir également, comment on peut change de façon permanente le report.html dans Quizmaker ’09 sans avoir à le changer manuellement à chaque fois qu’on publie un quiz.
 

Activer l’option Print Results dans Quizmaker ’09

Pass Result (Résultat réussi)

Pour activer cette option, cliquer sur le bouton Pass Results dans le ruban de Quizmaker ’09:

(l’image montre à la fois les boutons Pass Results et Fail Results)

Cocher “Allow user to print results”. Option facultatif: Vous pouvez également cocher l’option “Prompt the user for their name before printing” (Demander le nom de l’utilasateur avant d’impimer):

Ceci permettra à l’utilisateur d’imprimer leurs résultats en cas de réussite du quiz.

Fail Result (Résultat d’échec)

Pour permettre l’impression des résultats en cas d’échec, faites pareil avec le bouton Fail Results dans le ruban comme montré au dessus. La boite de dialog est semblable à la boite pour les Pass Results. Cocher l’option “Permettre aux utilisateurs d’imprimer les résultats.” ( “Allow users to print results” ) et l’options facultatif de demander le nom de l’utilsateur “Prompt the user for their name before printing”.

 

Report.html

Le fichier Report.html est mà ou est compilé la fiche des Résultats Imprimés et c’est là aussi où nous devons faire des changements. Vous trouverez ce fichier dans les fichiers publiés de votre quiz. Pour Quizmaker ’09, ce fichier se trouver dans le dossier quiz_content mais seulement si vous avez selectionné l’option de faire imprimer les résultats pour vos utilisateurs.

Publier un Quiz tout seul

Si vous publiez votre quiz tout seul, soit sans être inseré dans Presenter, vos fichiers publiés ressembleront à un peu comme ceci:

Ouvrez le dossier “content_folder” pour voir ceci:

Notez le fichier the report.html. C’est ce fichier que nous devons ouvrir et éditer.

Publié un Quiz pour Presenter

Si vous insérez votre quiz dans PowerPoint et Articulate Presenter, alors vous devrez regarder dans les fichiers publiés de Presenter ce qui ressembleront à ceci:

Ouvrez le dossier “data” pour voir ceci:

Ouvrez le dossier “SWF”:

Enfin, ouvrez le dossier “quiz..” pour voir les fichers de projet de Quizmaker:

 

Un Report.html revisé

Donc maintentant, nous avons localisé le fichier et il nous reste à faire quelques changement basiques pour changer l’apparence de notre rapport. Une autre possibilité consiste à remplacer ce fichier que nous avons déjà éditer. Ce que j’ai fait c’est de prendre un report.html standard, puis d’ajouter des commentaires dans le code afin de mieux comprendre ce qu’il faut changer et où. Vous pouvez donc soit remplacer le report.html dans vos fichiers publiés avec le fichier que j’ai préparé ou alors faire les changements vous-mêmes comme indiqué.

1. Vous pouvez télécharger le fichier en format zip. Télécharger le fichier ici

   (Notez que la seule chose qui a changé dans ce fichier c’est les commentaires. Aucun code a été changé dans le fichier.)

2. Vous pouvez également voir le report.html avec les commentaires d’abord ici avant de le télécharger. Vous verz une série de commentaires numérotées dans le code pour faciliter la compréhension. (Notez qu’il est format texte ici et non pas en html. Si vous voulez utilisez le ficher, télécharger le par le lien au dessus.).
3. Décompressez (unzip) le fichier que vous avez téléchargé.

 

4. Ouvrez le dans Bloc Notes. (Cliquez droite le fichier puis selectionnez Ouvrir avec – > -> Bloc Notes. Voir ici pour une démo rapide).

 

5. Remarquez les commentaires dans le fichier. Chaque commentaire a son numéro et correspond à une partie de la page Printed Results.

 

6. Très simplement, vous devez ajouter des marques de commentaires devant les lignes appropriés pour enlevé certaines informations de la page des résultats imprimés. Pour faire cela, ajouter // au début de la ligne.

 

7. Vous pouvez réperer les lignes en regardant l’interaction Engage ci dessous. Par exemple, étape 4 dans l’interaction ci dessous correspond à commentaire 4 dans le fichier report.html.

 

8. Vous pouvez créer un quiz “test”, voir la page Print Results, puis, en même temps que vous éditer le report.html, relancer la page à chaque que vous faites un nouveau sauvegarde du document. De cette façon, vous voyez concrètement les changements que vous faites.

 

9. Faites ces changements très simples puis sauvegardez le document.

 

10. Une fois fini, remplacez le report.html dans votre quiz existant avec cette nouvelle version. N’oubliez pas que le code est totalement inchangé sauf que avez rendu certaines lignes comme des commentaires.
     
11. Maintenant que vous avez changé la page des Résultat Imprimées, vous pouvez distribuer votre quiz. Ne pas le republier ou le republier dans Presenter ou vous allez perdre tous les changements!

 

 

Regardez cette interaction pour voir quelles parties du code vous changez. 

 

Cliquez ici pour voir l’interaction en plein écran. 

 

Exemple

Voyons un exemple concret pour voir comment fonctionne ce fichier report.html revisé. Imaginons que nous voulons enlever la Réponse Correcte et la Réponse de l’Etudiant de la page des résultats. Si nous regardons l’interaction ci-dessus, on voit que nous devons changer les étapes 5 et 20 pour la colonne Réponse Correcte (Correct Answer) et les étapes 6 et 21 pour la colonnne Réponse de l’Etudiant (Student Answer) pour le corps et l’entête des deux.

Si vous n’avez pas encore téléchargé le ficher, faites le maintenant, décompressé le fichier et ouvrez le avec Bloc Notes.

Allez sur commentaire 5 dans le report.html. Vous allez voir “//5. CORRECT ANSWER BODY : THIS IS THE CORRECT REPONSE NEEDED TO OBTAIN POINTS” (CORPS REPONSE CORRECTE: VOICI LA REPONSE CORRECTE REQUISE POUR OBTENIR DES POINTS)

On doit ajouter // avant le codedocument.write immédiatement après étape 5 dans le code comme montré dans l’image ci-dessous:

 

AVANT

APRES

Nous allons faire la même chose pour étape 6.

AVANT

APRES

Etape 20

AVANT

APRES

et Etape 21

AVANT

APRES

Il suffit de sauvegarder le fichier et le quiz est prêt à être distribué.

 

 

Un nouveau format pour les Résultats Imprimés

Avec juste quatre groupes de //, nous avons changé les résultats de ceci:

 

à ceci:

 

Et voici le quiz même d’où viennent les images ci dessus. Vous pouvez tester les résultats vous même pour voir comment le rapport a changé.

 

Voir le quiz et le rapport des Résultats Imprimés pour de vrai. 

 

Gagner encore plus de temps

Si vous voulez juste changer le format pour les Résultats Imprimés pour un seul quiz, alors la méthode ci dessus est très bien. Mais si vous voulez que tous vos quiz soient changés ou alors plusieurs d’entre eux, alors vous feriez mieux peut être de faire ce qui suit:

Veuillez noter que la méthode ci dessous n’est pas officiellement recommandé par Articulate.

Plutôt qu’éditer les fichiers publiés à chaque fois que vous publiez un quiz, pourquoi pas éditer les fichiers du programme afin qu’à chaque fois que vous publiez un quiz, le nouveau report.html est automatiquement incorporé dans les fichiers publiés. L’avantage est que vous n’avez pas besoin à chaque fois d’ajouter des // dans le code. Vous le faites une seule fois et vous pourriez même garder plusieurs modèles du report.html à utiliser si nécessaire.

Vous devriez suivre toutes les étapes ci dessus mais plutôt que changer les fichiers publiés, faites ceci:

Aller à cet endroit sur votre ordinateur:Mon Ordinateur -> Disque Locale Lecteur C: -> Fichers Programmes -> Articulate -> Articulate Quizmaker -> Content (les noms vont changer un peu en fonctionne de votre version de Windows)

Trouvez le report.html file.

Renommer le report.html à report_original.html

 

Mettez votre nouveau report.html dans ce même dossier. Vérifie qu’il a comme nom, report.html.

Désormais, vous pouvez créer un quiz comme d’habitude, le publier et lorsque vous regardrez les Résultats Imprimés, vous verez le format revisé automatiquement, sans avoir à changer manuellement le fichier report.html.

Vous pouvez garder des versions différentes du report.html dans ce dossier et changer le nom des fichiers quand il le faut. (comme montre l’image ci dessus). Si vous voulez utiliser un modèle en particulier, assurez-vous qu’il s’appelle report.html et renommez les autres fichiers comme report2.html, ou alors report_sans_reponses_etudiants.html etc afin de ne pas confondre Quizmaker.

Bien sûr, n’oubliez pas que lorsque vous reinstallerez Quizmaker ’09, votre report.html sera effacé et remplacé par l’original donc prenez une copie d’abord.

 

REMARQUES

Cette méthode fonctionne également avec Quizmaker 2 bien que le report.html utilisé dans cette article provienne de Quizmaker ’09.

Vous pouvez également changer la couleur de fond de la page des Résultats Imprimés ou ajouter une image de fond en ajoutant le code dans le HTML.

This post is tagged