Share My Creation Websocket Approach to eTraining Courses and Webapp Questionnaires

Discussion in 'B4J Share Your Creations' started by William Lancee, Jul 29, 2018.

  1. William Lancee

    William Lancee Member Licensed User

    '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
    Last edited: Aug 17, 2018
  2. William Lancee

    William Lancee Member Licensed User

    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 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:

    [this is a folder with the childhoodExperiences1.txt script file]​
    [this html file is called for all QSScripts with the QSScript name as a a query string]​
    [this html file has the list of examples to select from and calls "generic.html"]​

    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:

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

    Note 1: It is a testament to the efficiency of B4X that all of this is accomplished with a 39KB 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 was updated 2018-08-16]

    Attached Files:

    Last edited: Aug 18, 2018
    alwaysbusy and Erel like this.
  3. Mashiane

    Mashiane Expert Licensed User

    t would be interesting to have this running in ABMaterial.
  4. William Lancee

    William Lancee Member Licensed User

    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?
    alwaysbusy likes this.
  5. TomDuncan

    TomDuncan Active Member Licensed User

    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.
  6. William Lancee

    William Lancee Member Licensed User

    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.

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice