By sharing this editor, our objective is to provide teachers with a way to easily convert a slideshow into an online course, so that they can experiment with hybrid pedagogies of the blended learning course type.

The solution proposed here is the adaptation to HTML 5 of a development carried out under Flash in 2006 and which proved very effective. In a few weeks, around sixty online course sessions had been created.

Its great advantage is that it can be implemented very easily by a teacher, without requiring the support of specialists in educational digital technologies.

More sophisticated solutions can be made, but this one has all the essential features.

If you wish to modify the html file of a Diapason session, it is possible to edit it by hand with a text editor, but this is not of particular interest and involves the risk of error.

We have indeed seen that three important points concerning the slidesContainer division must be checked so that the Diapason session can run correctly:

• their place in the slidesContainer division determines the order of passage of the steps when viewing the Diapason session

• for each of them the step index concatenated to the audio word must be its order number

• the only steps that are played are those that appear in the slideList division's list. If it is truncated, the step blocks missing from the list can remain in the html file, but they are not viewed

We therefore built a utility, called DiapasonViewerEditor, which allows you to open a session html file and modify the organization of the steps, then save these modifications.

The figure below shows two views of the editor. The one on the left corresponds to the html file of our example before modification, while in the one on the right we have moved the “Substances (2/2)” step up a notch and introduced a new step before the “Points” step.

The configuration of the Diapason viewer html files is presented in this page, to which you should refer before reading this one because it underlies all of the explanations below.

The Diapason session viewer html file editor is composed of two windows, one dedicated to the overall organization of the session, and the other to the editing of a step block.

Installing the app

This editor is version 2 of an application which comes in the form of an executable Java archive (DiapasonViewerEditor_En.jar file) containing all the libraries it needs.

On Windows and Mac, if it does not launch when you double-click it, Java is not installed on your machine. You will find the explanations for installing it at the following address: http://java.com/fr/download/index.jsp

On Linux, enter “java -jar DiapasonViewerEditor_En.jar” from the command line, or create a shell adapted to your environment.

File tree

We recommend that you place the file you want to edit in the "existing" folder. The one you are working on will be saved by default in the "distrib" file. This way, you will avoid the risk of erasing your original in the event of a mistake.

When you launch the editor, its screen is displayed. The File menu allows you to open a file, save the one you are working with, and exit the application. If you open the S07En_init.html file corresponding to the example we presented, you get the figure below.

The list of steps is displayed on the left of the screen, and six buttons allow you to make the following changes to the steps: move up or down, insert, delete, rename and duplicate.

By default, the files offered for opening are those from the "existing" folder, in which we recommend that you place the file to modify.

Using the editor is very intuitive: you select the step that interests you, and you can move it, rename it, delete it or duplicate it.

If you duplicate it, you must enter the name of the new step, and the previous content is retained.

If you insert a new step, a simple html page is added before the selected one, with the title you give. If no step is selected, it is inserted in the last place.

Once you have finished your modifications, the application offers to save them under the same name but in the "distrib" folder, so as not to risk overwriting the original file and to ensure that you can test it easily before deployment.

Note that this screen does not populate the step blocks for you. It only ensures that the code of the html file respects the order in which the steps are presented. The second screen of the app allows you to do this as we will see later.

Now let's come to the step block editor. When you double-click on one of the rows in the list of steps in the Session Editor, information about that step appears in the Step Block Editor screen (Figure below).

Two complementary editing options

This screen gives you the ability to edit a block of steps in two complementary ways:

• By browsing the folder tree, you can automatically generate links to image and sound files as well as to working files to which hyperlinks will appear on the HTML page.

• You can also edit the html code yourself by hand to add what you want to the page.

Editor features

The html code of the step block is displayed in a text field at the bottom of the screen.

At the top is the title of the step and the links to the image and sound files. The two "Browse" buttons allow you to modify these links by browsing the files in the Diapason session tree. If a new file is selected, it replaces the existing one and the html code is updated.

On the right side of the screen, at the level of these buttons, are indicated the number of the step (here n° 2) and its audio code.

In the middle of the screen are the fields for adding hyperlinks, which can be done in two ways:

• either, by using the "Browse" button, to files in the Diapason tree (here a pdf file of a presentation of Thermoptim)

• or to web pages. In the latter case, you need to copy and paste the URL into the "URL" field and add a title in the "Label" field.

In both cases, once the characteristics of the link have been defined, a click on the "Add link" button updates the html code by adding the hyperlink at the bottom of the step page.

As mentioned above, you also have the option to directly edit the html code of the step block by entering text in the field at the bottom of the editor. However, it is imperative that this code is included inside the <td> tag, otherwise the html file of the session will not be properly configured.

Validation of the html code

If you have manually modified the html code of the step block, it is best to perform a syntax check. This can be done by using the Nu Html Checker page (Figure below) to which the hyperlink at the top left of the editing window points to.

Please note: this web page tests full html pages and not just a block of code like yours. So if you replace the content of the window of this web page with all of your code, you will be told of errors.

To avoid them, copy only the portion of code inside the "td" tag, i.e. between <td> and </td>, then place it, in the web page window, in the "body" tag, i.e. between <body> and </body>, and then click on the "Check" button below it.

Once you are sure that your code does not contain errors, validate your changes by clicking on the "Validate HTML" button. This updates the step block in the Session Editor window. You can then continue editing your session file or save it.

To edit another step block, double-click its name in the list of steps.

Once you're done, go back to the session editor window and save your changes.

Warning: if you want to build a new Diapason session, the easiest way is to start with a template containing only two steps, one of information, and the other corresponding to a slide, then fill it in by adding new steps using the session editor. To make it easier for you, below is such a template.

The editor Java files are available here. These document are licensed under the Creative Commons CC BY-SA 4.0 (Attribution-ShareAlike 4.0 International) license.

The editor's user manual is available below.