Consists of the page content and components that should be rendered.

This are the attributes, that you can set:

• title => Title of the page
• continueRandomly => if set to true, only one available transition will be shown to the player. this one will be choosen randomly...
• timerVisible => set to true if you what to show the timer for this page
• time => time in seconds for the timer
• autoTransitionOnTimerExpiration => if 
• money => the current amount of the player will be overwritten by this amount of money
• notebookVisible => not used at the moment

       

• Every component is responsible for its own content.
• Required properties for component to be rendered correctly are numberOfColumns and renderOrder.
• There are these components available: ImageComponent, TextComponent, LinkComponent and VideoComponent.
• Image and Video components are depending on resources like image and video respectively, so path to the resource files MUST be added in each component.
• **ImageComponent **has one additional attribute: **zoomable: **player can simply zoom the picture in case he need additional details.  
• Exercise are also belongs to the components
• Type of exercise that are being used at the moment are TextExercise, RadioButtonExercise, CheckboxExercise, DateExercise
• Each Exercise has its own solution 
  • TextExercise → has four properties maxLength, placeholderText, defaultText and textSolutions.list.
            DefaultText means => text is in input field. PlaceholderText means => it is a description for the input field which goes away if you click in.

                             TextSolution contains textToCompare, minLength and mode properties. textToCompare represents the correct answer and it is compared to player input.

                             Mode should be one of of the options {contains, fullMatch,  fuzzyComparison and length}

• • CheckboxExercise→  has properties: options (list of ExerciseOption objects), minimumSelected and solutionMode.

                            There are 2 solutionMode: 

                              1. **correct - **in options list set ExerciseOption object property correct to true

                              2. **minimum - **only has to be set minimumSelected property needed number

• • RadioButtonExercise → has list of Option objects. Each option has two properties text and boolean correct. Can have only one correct option.
  • UploadExercise → booleans isMandatory => if player has to upload a file.
  • DateExercise → has property solution. solution has to be populated as a string (e.g 02.02.2020) and it has to be in format dd.mm.yyyy
     

• Responsible for gameplay as they are defining where player can go next.
• They can be dependent on some criteria or more of them, which in that case they has to be defined (like some exercise etc.) or they can be unlocked (for example "Continue" button).
• Available criteria types are mail, page and exercise. Depending on user actions different transition will be available
  • Page criteria 
    • visited → if user visited specific page
    • notVisited → if user didn't visit specific page
    • visitedAny → if user visited one of the pages (e.g page 1 or page 3 or page 5)
    • timeExpiration → if the timer on the affected page was expired. Attention: This does only work, if the expired timer is on an other page!
  • Exercise criteria - if user has solved exercise correctly (e.g TextExercise, RadioButtonExercise )
  • Mail criteria - if user answered the mail or not
  • Dialog criteria - if user answered specific dialog response
• At the moment transitions could be triggered: automatically (time expiration on the page), by player, mail reply or** dialog response**. 
• pageTransition attributes
  • buttonText - if you want a different name instead of continue
  • time - is not used at the moment
  • to - the page where to go with this transition
  • money - the money that will be added or removed to the current amount of the player

      Required properties for them to work properly are: from and to

• Represents player history what he did and which page he visited during the game.
• Holds multiple notebook entries, like pages.
• On each page where we want to create new notebook entry we need to add notebook entry file with populated page property. 
• Each component, exercise and mail (inputs of the player) can be added to the notebook by setting properties in a following way:
  • "showInNotebook" : true,
    "showInNotebookAt" : values could be "pageExit", or "pageEnter" depending on when do you want to add the specific component/exercise.
• If you don't add new notebook entry file on specific page but you added this properties in your files, then components/exercises will be added to the last created notebook entry file
• On each entry a player can add personal notes.

      Required properties for working properly:

• the wished title of the entry: title

• Classical representation of the mail inbox with messages that player received while playing the game.
• Received after certain time or immediately, time property is receiveAfter 
• If incoming mail on the page should be opened then required property is openOnReceive
• if mail reply should be added in notebook then required property is showInNotebook

• Represents another type of player interaction with professor, colleagues etc.
• Will be shown as a pop-up during the game
• Can we received after certain time or immediately when player reaches the page, time property is receiveAfter 
• On each dialog player will have at least one option that he will have to select, and depending on selected option he will either do the transition to the next page or stay on the page
• Affected files dialog.json, dialogResponse.json, dialogSpeech.json.

Required properties: 

    in dialog.json :

• from → path to character object which is mandatory for every dialog
• receiveAfter → must be populated (if timer is 0 than we 0 should be added to the property value- it can not be null)
• speech → path to dialogSpeech 

   in dialogResponse.json

• from → path to DialogSpeech
• to →  path do another DialogSpeech (note that if there is only one speech in dialog then both from and to properties have the same reference)
• pageTransition → if the transition is about to happen after selection one of the options then this property is mandatory

      if we have more than one option to choose in dialog then we will have more dialogResponse objects

   in dialogSpeech.json:

• markdownContent → text for dialog 

      

• Recommended size for imageComponent :
  • min width: 1440px
  • height: auto

• Dialog character Image:
  • ratio: 1:1
  • minWidth: 1440px
• Topic Image
  • ratio 4:3
  • minWidth: 680px

*       Images*

• Full page has 12 columns, but we are using 10, since offsetColumns will be always 1 from left and 1 from right
• If the image has to be in full size then the numberOfcolums should be set to 10 (because of above mentioned offsetColumns). If we we want component next to the image, then the Image will be on the left and the sizes will be:
  • image: numerOfColumns  4, offsetColumns 1, 
  • component: numerOfColumns  5, offsetColumns 1

*      TextComponent*

• When text is full size page then the numerOfColumns  should be 8, and offsetColumns 2.
• When text has to be next to some component, it should be always on the right side and the sizes are : numerOfColumns  5, offsetColumns 1

*      Audio Component,Video Component
*

• Always has to be full size page numerOfColumns  10, offsetColumns 1

*     TextExercise, CheckboxExercise, RadioButtonExercise*

• Full size : numerOfColumns  8, and offsetColumns 2
• When it should be placed on the right side, bellow some component for instance then sizes are: numerOfColumns  5, offsetColumns 6