Guide d’utilisation de KStudio

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Réaliser des simulateurs avec K-Meleon Editor ======

Dans cette section, vous retrouverez toute la documentation relative à la phase de **réalisation** des simulateurs.

----

===== Créer un simulateur =====

Un simulateur est un **contenu de formation**, contenant une série d'écrans scénarisés.

Chaque nouveau simulateur va être créé sur l'application en ligne **K-Studio**.

  - Dans votre projet, dans l'écran Contenus, cliquez sur + Créer un contenu (Cette fonction est disponible si vous avez le rôle de concepteur ou propriétaire dans le projet). Une fenêtre Créer un nouveau contenu apparaît.{{ :guide:creer.png?direct |}}
  - Donnez un **nom** à votre contenu, dans le champ Nom. Vous pourrez modifier le nom ultérieurement. Notez que le nom indiqué ici ne sera visible que du public ayant accès à K-Studio, pas du public à former. {{ :guide:add_content.png?direct |}}
  - Si vous le souhaitez, vous pouvez ajouter une information à propos du contenu, dans le champ **Information complémentaire**. Cette information sera visible seulement sur la plateforme K-Studio (pas dans K-Meleon Editor). L'information apparaîtra au niveau du contenu, soit au survol lorsqu'ils sont présentés en tuiles, soit entre parenthèses lorsqu'ils sont présentés en liste. Le champ information complémentaire pourra être modifié ultérieurement.
  - Cliquez sur **Enregistrer**.
  - Le contenu nouvellement créé apparaît dans votre liste de contenus.

----

===== Editer un simulateur =====

Pour éditer un contenu, un accès à K-Studio est nécessaire, les outils **K-Meleon Editor** et **K-Sync** doivent être installés sur le poste. (Pour les installer, voir le chapitre [[guide:install_01|Installer les logiciels]]) et vous devez avoir le rôle de concepteur ou propriétaire dans le projet.

L'édition d'un contenu commence toujours à partir de l'application en ligne **K-Studio**.

  - Sur l'application **K-Studio**, sélectionnez l'écran Contenus de votre projet.
  - Chaque simulateur présente la fonction Editer. Cliquez sur le bouton Editer du simulateur sur lequel vous souhaitez travailler.{{ :guide:contenuediter.png?direct |}}

L'outil **K-Sync** se lance automatiquement et le logiciel K-Meleon Editor va s'ouvrir sur votre poste à l'issue de la synchronisation. Vous pouvez alors éditer le contenu dans **K-Meleon Editor**.

Note: La première synchronisation avec votre poste prend un peu de temps et c'est normal. Les prochaines synchronisations seront significativement plus rapides.

----

==== Paramétrer un simulateur dans K-Meleon Editor ====

Avant de commencer à proprement parler la scénarisation du simulateur, nous vous recommandons d'effectuer le paramétrage de celui-ci, afin d'indiquer les informations importantes comme le **titre** et le **type du contenu**. 

  - Cliquez sur l’icône **Propriétés**. Vous y accédez également depuis le menu **Simulation**.{{ :guide:ico_propriete.png?direct |}}
  - Renseignez le titre de la simulation : C'est le titre qui sera intégré dans le livrable final et visible par l'apprenant.
  - Choisissez le **Type** de contenu que vous allez réaliser{{ :guide:proprietesducontenu.png?direct&400|}}

  * L'exercice interactif : c'est un contenu destiné à faire manipuler les apprenants, pour entraîner et aider à mémoriser des process. Un exercice interactif se présente généralement avec une mise en situation (ou "énoncé"), une partie exercice dans laquelle l'apprenant devra réaliser des actions sur les répliques d'écrans, une partie solution que l'apprenant pourra visionner si besoin.

  * La démonstration : c'est un contenu destiné à présenter, sans que l'apprenant interagisse. Concrètement une démonsration est la partie solution d'un exercice : le lecteur de contenu sera configuré pour lire uniquement la scénarisation de l'onglet Solution (voir [[guide:kmed_02|Intégrer des solutions au simulateur avec K-Meleon Editor]]).

  - Dans la liste **Langue**, sélectionnez la langue dans laquelle seront rédigés les différents types de messages pédagogiques (accueil, erreur, action inattendue, etc.). Les messages insérés par défaut par K-Meleon Editor seront alors proposé dans cette langue.
  - Renseignez les dimensions de diffusion : Les champs **Hauteur** et **Largeur** servent à déterminer la taille que prendra la fenêtre du navigateur lors du lancement du contenu. Assurez-vous de choisir des dimensions qui correspondent à la résolution minimale des écrans utilisés lors de la diffusion.
  - Optionnel : Vous pouvez renseigner les auteurs et/ou scénaristes du contenu (Ces informations ne seront pas visible par l'apprenant).
  - Cliquez sur le bouton **OK**

----

==== Insérer des scènes dans le simulateur ====

Une simulateur est composé de une à plusieurs scènes.

Une scène est un écran html. Il peut s'agir de :

  * Ecrans simulés : préalablement capturés avec K-Pture, et importés sous forme de .kmp sur **K-Studio**. (Pour en savoir plus : [[guide:kpture_01|Importer les captures (.kmp) sur K-Studio]])
  * [[guide:kmed_05|Pages d'introduction, de transition, de fin]]
  *[[guide:kmed_04| Ecrans du mode évaluation]]
  * [[guide:kmed_03|Quiz]]

Les scènes du contenu courant apparaissent dans la zone latérale à gauche de K-Meleon Editor.

Pour ajouter des scènes dans le contenu de simulation :

  - Cliquez sur le bouton **Insérer un nouvel écran**.... (Vous le trouvez aussi dans le menu **Simulation**.){{ :guide:insert.png?direct |}}
  - Dans la fenêtre **Sélectionnez des écrans à ajouter**, sélectionnez dans la partie à gauche, la source des écrans à ajouter. (Le **Dépot local** contient les écrans partagés dans le projet, tels que les pages d'introduction, transition, etc. Les **Paquets d'écrans** (.kmp) contiennent tous les .kmp présents dans l'écran **Ecrans capturés** de app.kstudio365. La partie **Contenus** liste tous les contenus du projet).{{ :guide:insererecrankmp.png?direct&400|}}
  - Dans la source choisie, sélectionnez ensuite les écrans à ajouter. Pour une sélection multiple, maintenez la touche Ctrl appuyée et cliquez sur les scènes à ajouter. Pour une sélection de toutes les scènes de la source sélectionnée, appuyez simultanément sur les touches **Ctrl + A**.
  - Cliquez sur **OK**.

----

==== Déplacer une scène ====

Pour modifier l'ordre des scènes dans la zone Scenes, vous pouvez déplacer les scènes par "drag & drop" :

  * Cliquez sur la scène à déplacer.{{ :guide:deplacerunecran.png?direct&200|}}
  * Faites-la glisser en maintenant le clic enfoncé jusqu’à l’endroit choisi.
  * Une barre noire apparaît pour indiquer le futur emplacement de la scène.

----

===== Renseigner les instructions destinées à l'apprenant =====

==== Créer un énoncé ====

Le message d’énoncé vous permet de présenter le sujet de la simulation que vous transmettez à l’apprenant. Il doit comprendre le sujet de l’exercice, les objectifs à atteindre, des informations pour le bon déroulé de l’exercice.

L'énoncé sera affiché à l'endroit prévu dans le modèle du projet (dans un panneau ouvrant, dans le modèle par défaut) et consultable à tout moment dans l'exercice.

  - Insérez un énoncé en cliquant sur l’icône **Éditer l’énoncé**. Vous pouvez également y accéder depuis le menu **Exercice**.
  - Le message d’énoncé s’affiche dans la zone de prévisualisation. Cliquez sur l’icône **Éditer l’énoncé**. L’éditeur de texte s’affiche.{{ :guide:enonce.png?direct&400|}}
  - Tapez le message destiné à l’apprenant.
  - Cliquez sur le bouton **Sauvegarder** une fois votre saisie terminée.

----

==== Créer un message d'accueil ====

Le message d’accueil permet de rappeler à l’apprenant les instructions qu’il doit suivre, sur chaque écran. Dans un message d’accueil, vous pouvez écrire les instructions que doivent suivre les apprenants sur l’écran en cours de scénarisation. Chaque scène a son propre message d’accueil. Le message apparaîtra au chargement de la scène, sans action de la part de l'apprenant.

  - Cliquez sur l’icône **Insérer un message d’accueil** dans la barre d’outils ou dans le menu **Exercice**. Le message apparaît simultanément dans la zone de prévisualisation et dans l’onglet **Exercice**, dans la section **Message d’accueil**.{{ :guide:message_accueil.png?direct&400|}}
  - Dans K-Meleon Editor, cliquez sur l’icône **Edition**. Vous y accédez également depuis le menu **Outils**
  - Cliquez sur le bouton **Éditer** pour modifier le texte. L’éditeur de texte s’affiche.
  - Tapez le message destiné à l’apprenant.
  - Cliquez sur **Sauvegarder** une fois votre saisie terminée.

----

==== Modifier les propriétés d'un message ====

  - Pour modifier les propriétés des messages, faites un clic droit sur le message, dans le chemin.
  - Cliquez sur **Propriétés**. La fenêtre des propriétés s’ouvre.{{ :guide:editerproprietesmsg.png?direct&400 |}}
  - Vous pouvez modifier le titre du message **1**, le texte du message **2**, la position du message **3** dans l’écran, le type de message **4**. {{ :guide:editerproprietesmsg2.png?direct&400 |}}
Ci-dessous, voici les différents types de message possibles :{{ :guide:modifiertypemsg.png?direct&400 |}} Modifier le type du message a une incidence sur son titre et son apparence.

----

==== Lier un message complémentaire à un message existant ====

Vous pouvez ajouter des détails (informations complémentaires ou spécifiques, listes) accessibles par le biais d’un lien, à un message ou diviser un message existant en deux messages (lorsque le contenu est trop long).

  - Ajouter le texte devant apparaître dans les détails, dans le champ **Détail**.{{ :guide:message_accueil_propriete.png?direct&400 |}}
  - Ajouter le texte du lien (par exemple « suite ») par le biais duquel vous accédez aux détails dans le champ **Texte du lien**.
  - Cochez la case **Affichage automatique** pour que le message contenant les détails s’affiche en même temps que le message. Dans le cas contraire il apparaît lorsque l’on clique sur le lien. Lorsque vous prévisualisez la simulation, vous pouvez accéder aux détails du message en cliquant sur le lien présent dans le message de tutorat :

----

===== "Scénariser" le simulateur : la notion de chemin =====

La notion de **chemin** est fondamentale dans la scénarisation d'un simulateur. Schématiquement, un simulateur est une collection d'écrans (aussi appelés scènes) reliés entre eux par des chemins. Le **chemin** d'un écran donné est l'ensemble des actions que doit réaliser l'apprenant afin de passer à l'écran suivant.

Dans cette partie, vous verrez comment créer et paramétrer des chemins dans votre scénarisation.

----  

==== Scénariser un chemin avec des poignées d'étape et d'arrivée ====

  - Sur la scène, cliquer sur un champ dont vous voudrez contrôler le contenu (champ texte que vous avez complété, bouton radio, liste déroulante...etc). La **poignée d'étape N** apparaît à côté du champ (dans notre exemple il s'agit du champs montant).{{ :guide:exerciseaddfirststep.png?direct |}}
  - Cliquer sur la **poignée d'étape**. Le menu de la poignée s'ouvre. Sélectionner **Insérer dans un nouveau chemin**{{ :guide:exerciseaddsecondstep.png?direct |}}
  - Le chemin, qui comprend l'étape correspondante au champ sélectionné, ainsi créé apparaît dans le volet de scénarisation (**scénarisation > exercice**){{ :guide:chemin.png?direct |}} Notez qu’un chemin est composé de 1 à n étapes et qu’il faut répéter l’opération d’ajout d’étapes autant de fois qu’on veut contrôler de valeurs dans des champs distincts. 
  - Cliquer sur un élément de navigation, toujours dans la même scène afin de **créer une étape finale**. Dans notre exemple il s'agira du bouton enregistrer. Vous noterez que le chemin créé lors de l'étape (3) apparaît en gras dans le menu de la poignée de fin. Sélectionner ce chemin.{{ :guide:exerciseaddthirdstep.png?direct |}}
  - Notre chemin a désormais une **étape finale**{{ :guide:exerciseaddfourthstep.png?direct&600 |}}

Ce qui se traduira par :
  * quand l'apprenant sera sur cette scène il devra saisir le montant **3 600 €** dans le champs //Montant//
  * cliquer sur le bouton //Enregistrer//
  * le simulateur vérifie que les caractères sont bien ceux indiqués dans le chemin scénarisé
  * si la vérification est positive, l’apprenant atterrira sur  la scène //Page de fin//
  * sinon le message d'erreur relatif à la saisie s'affichera

Dans les étapes du chemin, le nom des différents éléments (champs, etc.) peuvent être différents de ceux qui sont visibles dans la scène. [[guide:kmed_01#Modifier les noms génériques dans le chemin|Nous vous conseillons de modifier ces noms afin de rendre intelligible votre scénarisation]].

----

==== Rendre intelligible un chemin ====

K-Meleon Editor attribue un nom générique à chaque chemin ainsi qu’à chaque élément d’interface (champ texte, bouton radio, liste déroulante) et de navigation (boutons, liens, menus) sur lesquels vous définissez une action. Ces noms génériques apparaissent dans chaque chemin et sont automatiquement repris dans les messages d’erreur associés à chaque étape du chemin. Dans notre exemple le champs montant est par défaut reconnu comme le champs 17173:0 {{ :guide:modifienomsgeneriqueselementsdschemin.png?direct |}}

Il est fortement recommander de modifier les noms génériques qui apparaissent dans le chemin.

Dans l’exemple suivant, nous remplaçons :
  - le nom du chemin par **Montant - Enregistrer**
  - le nom du champs par **Montant**, cette modification est répercutée immédiatement dans le message d’erreur associé à l’étape. 
  - La **description de l'étape finale** (pour cela clic droit > propriétés > édition de la description){{ :guide:renommerelement_modifpriseencompte.png?direct |}}

Nous obtenons alors un chemin beaucoup plus clair et lisible.


----

==== Créer une multitude de chemins pour un même écran ====

Théoriquement il est possible d'avoir une infinité de chemins pour un écran donné. Cependant pour une utilisation simple, il est probable que vous n'en ayez pas besoin. Si vous souhaitez toutefois [[guide:expert_05|scénariser de multiples chemins]], la lecture de la section en lien est chaudement recommandée.

----

==== Paramétrer le niveau de contrôle des étapes au sein d'un chemin ====

Vous pouvez déterminer avec quel degré de précision l’apprenant doit saisir des données dans un formulaire. Le paramétrage de la permission de saisie donne à l’apprenant plus ou moins de liberté dans la saisie des données (respect de la casse, orthographe, donnée elle-même).

  - Double-cliquez sur le contrôle de permission de saisie qui apparaît sous l’étape, dans le chemin.
  - Dans la liste déroulante, sélectionnez la permission de saisie qui vous convient.{{ :guide:selectionnerpermissionsaisie.png?direct |}}
  - Dans le champ correspondant, tapez une valeur.

**Exactement** : La saisie est sensible à la casse. Prise en compte des minuscules et majuscules.

**À peu près** : Pas de prise en compte de la casse. Peu importe que les caractères soient saisis en minuscules ou en majuscules.

**Différent** : La saisie doit être différente de la donnée que vous spécifiée dans le champ. Pour rendre une saisie obligatoire mais sans contrainte sur le contenu, utilisez "Différent de" et laissez vide, le champ associé.

** Plages de valeurs ** : [[guide:expert_04#Contrôler une comparaison de nombres|article dédié ici]]

----

==== Modifier le message d'erreur de chaque étape au sein d'un chemin ====

Le message d’erreur permet d’avertir l’apprenant qu’il n’a pas respecté les consignes qui lui ont été données ou qu’il a sélectionné un élément de navigation (bouton, lien, menu) qui n’est pas défini dans l’un des chemins scénarisés.

Un message d’erreur générique apparaît systématiquement sous le contrôle de permission de saisie sous chaque étape.

Pour modifier un message d'erreur, effectuer simplement un double-clic sur le message.

Alternativement vous pouvez également passer par le menu **Propriétés** comme décrit ci-dessous :

  - Pour modifier le message d'erreur, faites un clic droit dessus.
  - Cliquez sur **Propriétés**.
  - La fenêtre **Propriétés** s’affiche. Modifiez le texte dans le champ **Message**.
  - Cliquez sur le bouton **OK**.{{ :guide:modifiermessageerreur2.png?direct |}}

----

===== Anticiper les cas d'action inattendue =====

La section //En cas d’action inattendue//, dans l’onglet Scénarisation, vous permet de définir des actions au cas où l’utilisateur ne respecterait pas le déroulé que vous avez défini dans l’onglet Exercice, comme par exemple oublier une étape ou cliquer sur un élément qui n’était pas scénarisé.{{ :guide:lescasactionsinattendues.png?direct |}}
  - Ajouter un **message d'erreur personnalisé** 
  - Ajouter un **script de scénarisation**
  - **Remplacer une valeur**
  - Ajouter un **changement de scène**

__Conseil__ : En cas d’action inattendue de la part de l’apprenant, vous pouvez lui rappeler les instructions précédemment données dans le message d’accueil en les recopiant dans le message d’erreur.

----

===== Prévisualiser la simulation =====

Il est fortement conseillé de visualiser de temps à autre le déroulé de votre simulation afin d’avoir un aperçu régulier de son avancement.

----

==== Depuis K-Meleon Editor ====

  - cliquez sur l’icône **Prévisualiser à partir de la scène courante pour voir le déroulement de la scène courante**.{{ :guide:preview.png?direct |}}
  - cliquez sur l’icône **Prévisualiser à partir du début pour prévisualiser la totalité des écrans**.{{ :guide:preview_all.png?direct |}}

Alternativement vous pouvez y accéder également depuis le menu Simulation.

----

==== Depuis K-Studio ====

  - Sur l'application **K-Studio**, sélectionnez l'écran Contenus de votre projet.
  - Chaque simulateur présente la fonction **Jouer**. Cliquez sur le bouton **Jouer** lancera la prévisualisation.{{ :guide:previewfromplatform.png?direct |}}

----