Share My Creation Websocket Approach to eTraining Courses and Webapp Questionnaires

'QS' (Questionnaire Sequencer), is my eLearning and questionnaire system that presents material to the client in a logic driven way. It is structured as an ordered sequence of text and media (questionnaires, quizzes, audio slide shows and video clips).

The system has had many variants in the past using different programming systems. The version presented here is a server-side program, "SmartSequencer", written in B4J. An eLearning project or a questionnaire consists of a project script that is interpreted by SmartSequencer. I designed the scripting language (QSScript) more than 15 years ago, and it has evolved to be easy to read and edit with a good text editor (Notepad++). Each project QSScript specifies which screens the client sees, as well as the logic that determines the specific sequence of the screens.

A QSScript is a simple text file that is automatically converted to a .json file when first referenced. Both the text file and the .json equivalent are stored on the server. The client-side is only a skeleton HTML/Javascript to connect to the server through a websocket. In fact, the motivation behind this exercise was to see if the websockets approach is up to the task (I think it is).

I have uploaded the zipped project folder which contains the app as well as two examples in separate subfolders under smartSeq\objects\www\. Each example project has a QSScript file (.txt and equivalent .json), as well as index.css, index.html, and myLogo.png files. Comparing the browser pages with the blocks in the .txt file will be most insightful. The index.html has a hidden div with the project's name (in case you are wondering how the generic app gets the name of the script).

The examples are extracts from working projects and are intended for review by the B4X community and are incomplete on purpose. Video and audio materials in the examples are copyrighted and should not be used in any other context. The SmartSequencer app itself may be modified or used 'as is' on new project QSScripts created by other members of the B4X community. Please acknowledge authorship in the source file of the app and QSScripts.

This SmartSequencer is not a finished product. Currently I am working on adding a progress indicator (not so straightforward as the logic flow through the sequence is based on the client's response set and can not be predicted beforehand). Moreover, each project still needs a database for login username, password, and logging user answers and data, as well as for allowing re-entry into interrupted sessions and multiple sessions per client. Such a database also requires a QSScript for retrieving data by authorized project administrators.

See post #2 for downloads

 

[William Lancee]

I have updated the app to include a database, a login procedure, administrative functions and more examples. In the examples with a user login, users, if interrupted, can resume where they left off. The administrative function allows retrieval of data for pasting in Excel (or statistical package).
I have also relocated the script files and media away from the 'www' folder. The original script files are never made available to the browser, and the media files are made available to the browser only when needed.

Because of size limitation for attachments (500K) I needed to break out the example script files into separate zip files. Please follow these steps to reconstitute the folder structure.

Step 1. Download the 6 attached zip files.

Step 2. Create a new folder called 'smartSeq'

Step 3. Unzip smartSeq.zip to this folder (there should be the expected B4J files as well as an 'objects' folder).

Step 4. The objects folder has an empty 'QSScripts' subfolder, unzip the remaining 5 example script files to this folder. The unzipped folder structure should look like this:

SmartSeq\Objects

SmartSeq\Objects\QSScripts

SmartSeq\Objects\QSScripts\childhoodExperiences1

[this is a folder with the childhoodExperiences1.txt script file]​

SmartSeq\Objects\QSScripts\childhoodExperiences2
SmartSeq\Objects\QSScripts\coderAssistant
SmartSeq\Objects\QSScripts\commonScripts
SmartSeq\Objects\QSScripts\resilienceTraining​

SmartSeq\Objects\www

SmartSeq\Objects\www\b4j_ws.js
SmartSeq\Objects\www\generic.html

[this html file is called for all QSScripts with the QSScript name as a a query string]​

SmartSeq\Objects\www\index.css
SmartSeq\Objects\www\index.html

[this html file has the list of examples to select from and calls "generic.html"]​

SmartSeq\Objects\www\mycopy.js
SmartSeq\Objects\www\myLogo.png​

SmartSeq\SmartSequencer.b4j
SmartSeq\SmartSequencer.b4j.meta
SmartSeq\customSubs.bas
SmartSeq\DBUtils.bas
SmartSeq\html.bas
SmartSeq\scriptUtils.bas
SmartSeq\SmartSequencer.bas
SmartSeq\WebUtils.bas
SmartSeq\SessionCreator.bas
SmartSeq\HttpsFilter.bas

To try it out, start SmartSequencer.b4j in release mode (this will create other standard B4J folders and an executable 'SmartSequencer.jar' file in objects). To kill the server when you have finished testing, use the kill button in B4J log panel. If you have closed B4J already, you may need to restart your computer or kill the server manually:

https://superuser.com/questions/215351/how-do-i-kill-a-process-that-is-dead-but-listening

SmartSequencer is a non-UI java app. Use a browser to go to 127.0.0.1:8888

Note 1: It is a testament to the efficiency of B4X that all of this is accomplished with a 39KB

smartSeq.zip folder in under 100 hours of work.​

Note 2: The QSScripts are also very compact and allow for inclusion of re-usable sections, like the

login.txt located in the commonScripts folder.​

Note 3: The .json files are created at first access and help to provided a structure for the parser

to use efficiently.​

Note 4: For debugging purposes, in this version the .json is created every time the app is run.

(for production versions, comment out 'isDebug = True' in line 66 of the 'Main' module)

​

[Due to a small bug, the smartSeq.zip was updated 2018-08-16]

 

[Mashiane]

t would be interesting to have this running in ABMaterial.

 

[William Lancee]

ABMaterial is a phenomenal system, where B4J server apps use the framework to create html, css, and javascript that are served to the user through web sockets. The design paradigm is based on controls nested inside a grid structure. The set of controls is extensive and the flexibilty of themes is vast. The focus is on the aesthetics of visible form.

My app also creates dynamic html (not css or javascript) on the fly and serves it to the client's browser via web sockets. The visual design part is very simple with an emphasis on following the logic of an eTraining course or a questionnaire sequence. I have built in the option to change themes to a small extent, but essentially I want all screens in a given sequence to look similar with only the content changing.

I can see that there might be a way to combine these approaches by having about a dozen or so different screens designed by ABMaterial and then presenting parameterized versions of these to the client's browser according to a QSScript.

What do you think?

 

[TomDuncan]

Had a look at your program.
Very impressive indeed.
Had a small problem on loading and found the json parser could not find the scripts.
I fixed this with..

parser.Initialize(File.ReadString(File.DirApp & "/QSScripts/" & thisScriptName, thisScriptName & ".json"))

in the smartsequencer websocket_connected sub line 69.

Also had a thought on layout for use with mobiles and computers along with many colour variations. I use w3-css which would make an easy change of colour themes etc.
I will have a look at the code and see what I can come up for you.
Tom

 

[William Lancee]

Thanks Tom

Let me know how you do with CSS. I never got along well with it, something to do with how I remember things (procedural vs taxonomic), or perhaps how disorganized I can be.

The system has evolved, so I'll see if I can post an updated version.

William