How does the client side work? - GATB/gatb-core-tuto GitHub Wiki
The client side of the GATB-Core Online Tutorial is actually made of:
- two 'html' pages: index.html and gatb-compiler.html
- a few set of JavaScript codes
'index.html' page is a JQuery/Bootstrap based template. It is responsible for displaying the list of available lessons for a particular trail (Rookie, Expert, etc.). The actual list of available lessons is contained in globals.js source code.
When you click on the link of a particular lesson on the 'index.hml' page, the browser switches to gatb-compiler.html. Again, this is a JQuery/Bootstrap based template responsible for displaying the content of the lesson: a title, a description, a c++ code editor filled in with a snippet, etc. And again, the lesson data is stored in globals.js source code.
Using such a template-based architecture enables us to easily add new content (e.g. lessons) in a very straightforward way: we just have to edit globals.js with new JSON description of the lesson(s) to add.