---
# System prepended metadata

title: SL+ specifications
tags: [st, sl+, km, dsl+, v4v, a21]

---

# SL+ specifications
###### tags: `sl+` `dsl+` te`st`and `a21` `km` `v4v`

## Project Iterations

| Reference              | Title                 | Iteration 1 (due end Jul.20) | Iteration 2  (due end Sep.20)  | Iteration 3 (due end Nov.20) | Iteration 4 (due end Dec.20) | 2021 --->                     |
| ---------------------- | --------------------- | ---------------------------- | ------------------------------ | ---------------------------- | ---------------------------- | ----------------------------- |
| **Curation (Squidex)** |                       |                              |                                |                              |                              |                               |
| 1.1                    | Sets                  | dashboard only?              | All data input (dsl+,st)       |                              |                              |                               |
| 1.2                    | Questions             | selected good examples       | Create all instances (dsl+,st) | Mastery Probe schemas & data | ...continued                 |                               |
| 1.3                    | Picture Books         | configure schema and content |                                | Create a proper Schema       |                              |                               |
| **Monitor / Admin**    |                       |                              |                                |                              |                              |                               |
| 2.1                    | Users/Groups/Projects | basic association            | Users into local Groups        |                              |                              |                               |
| 2.2 (sl+,dsl+,st)      | Activity Monitor      | progress                     |                                |                              | Device status                |                               |
| 2.3 (sl+,dsl+,st)      | Participants          | collect data, store          |                                | Create for a User manually   |                              | Add to another User           |
| 2.4 (st)               | Review                |                              | Overlay in-app                 |                              |                              |                               |
| 2.5                    | Mastery Probe         |                              |                                | Mastery Review, data LRS     | ...continued                 |                               |
| 2.6                    | Sequence Control      |                              |                                |                              |                              | Configurable Sequences        |
| **App**                |                       |                              |                                |                              |                              |                               |
| 3.0.1                  | Web App               | Web App                      |                                |                              |                              |                               |
| 3.0.2                  | Mobile App            | Mobile App                   |                                |                              |                              |                               |
| 3.0.3                  | Canvas LTI            |                              |                                |                              |                              | Canvas LTI                    |
| 3.1                    | Login                 | FEIDE                        |                                | IDPorten, UI, User list, PIN |                              |                               |
| 3.1.1                  | Consent               |                              |                                |                              |                              | New participants from Consent |
| 3.2                    | Organisation          | dashboard only?              | All nav / level layouts        | UI                           |                              |                               |
| 3.2.1                  | Avatar Creator        |                              |                                | UI - edit name and avatar    |                              |                               |
| 3.2.2                  | Group Selector        |                              |                                |                              |                              | UI - multi-select             |
| 3.2.3                  | Week List             |                              |                                | UI                           |                              |                               |
| 3.2.4                  | Day List              |                              |                                | UI                           |                              |                               |
| 3.2.5                  | Task List             |                              |                                | UI                           |                              |                               |
| 3.2.6                  | Include Participants  |                              |                                |                              |                              | Teacher adds Participants     |
| 3.3                    | Question Sequencer    | hard-coded                   | Sequence State Machine         | Mastery sequencing           | ...continued                 |                               |
| 3.4                    | Question Types        | see A.4.                     | 24 types (dsl+), (ST) #?       |                              |                              |                               |
| 3.5                    | Picture Books         | re-code from old app         |                                | UI, narrative assistance     |                              |                               |
| A.1                    | Audio & Video         |                              | Record Audio / Video locally   |                              |                              |                               |
| A.2.1                  | Answers & Tracking    | basic framework              | Answers & Tracking -> Server   | Answers & Trackings to LRS   |                              |                               |
| A.2.2                  | Progress Tracking     |                              | Sync with server               |                              |                              |                               |
| A.3                    | Set Templates         | Dash (st)                    | Week, Days, Tasks (dsl+)       |                              |                              |                               |
| A.3.1                  |                       |                              |                                |                              |                              |                               |
| A.4                    | Question Templates    | selected examples            | 24 Question Templates (dsl+)   | Mastery Probe Templates      | ...continued                 |                               |
| A.5                    | Server API            | (from VIVA)                  |                                |                              |                              |                               |
| A.6                    | Device API            | (from VIVA)                  |                                |                              |                              |                               |
| A.7                    | Animations            |                              | Picture books (dsl+)           | Animation book overlay       |                              |                               |
| A.8                    | Question Preview      |                              | Preview                        |                              |                              |                               |
| A.9                    | Caching Data          |                              |                                |                              | Local media cache            |                               |
| **Server**             |                       |                              |                                |                              |                              |                               |
| S.1                    | API                   | essential routes, GraphQL    | API                            | Create Participants          |                              |                               |
| S.2                    | Database              | essential models             | Database                       | Set up LRS                   |                              |                               |
| S.3                    | TSD Connector         |                              | TSD Connector                  | TSD & LRS connections        |                              |                               |
| **CMS**                |                       |                              |                                |                              |                              |                               |
| C.1                    | CMS Itself            | file storage                 |                                |                              |                              |                               |
| C.2                    | Set Data              | schema, graphQL, API         | Question Type Data             |                              |                              |                               |
| C.3                    | Question Data         | schema, graphQL, API         | Set Type Data                  |                              |                              |                               |


## Previous exmaples

 
**DSLPlus**
http://intermedia-prod02.uio.no/ispapp/part1
Use any code to connect, note there are extra buttons here to allow 'cheating' 😊
Some picture book pages include delays to allow storytelling before an animation is available, which prevents moving to the next page (look for the pointing hand)
Apple App Store: https://apps.apple.com/no/app/dslplus-i/id1453384808
Login: "apple":    Passord: "app1etesting"

**Kaptein Morf**
https://engagelab.uio.no/morfologi
Click the padlock icon.   login: '0000ZZ'  password: 'demo'
May be helpful to use browser Dev Tools to set window to iPad size
Animation in KM was made with Adobe Animate
Apple App Store:   https://apps.apple.com/us/app/id1316085218
 
 
## teSTand - Specifics

* (as SLPlus) To run on tablets or larger screens
* Tests are run with examiner and child (1-on-1)


## Q&A


#### LOGIN 
- [x] Best alternative for non-educational login?
* FEIDE not commonly used in kindergarten
* IDPorten (BankID)
    - Favoured second option!
* Persistent login
    - Can we prevent users sharing their account with others...?

#### GROUPS
- [ ] How do Groups work?
* kindergarten is an overall group
* children can be in groups of 1+
* Groups don't always consist of the same people

- [ ] How do we record progress and answers in groups?
* Suggestion: Log against each Participant, and include IDs of other members in log
* Suggestion: Next task unlocks if at least one member of the group has completed current task

- [ ] How does the same User perform with a 2nd or 3rd Group of Participants?


#### PARTICIPANTS
- [ ] How to reliably connect a Participant (student) to a second User (adult)?
* PIN number?
* Just allow teacher / parent to correspond using ID
    * Teacher and parent will know the child's identity anyway

- [ ] How can we transfer a Participant's work from one device to another?
 * this is difficult, especially with possibly Red data

- [ ] Who creates Participants? Teacher/Parent or Researcher?

#### MASTERY
* mastery probes will be individual (not group)
* these are like 'task types' but in a new category

- [x] Can we affect the screen's sensitivity to touch?
* preferrence is a 'confim choice' dialog

- [ ] How should random items be selected for display?

- [x] What kinds of statistical / progress information should be available?
* mastery test results
* ability to control progress based on data




## 1.	Content Editor / Curation

### 1.1	Curate Layout, Sets

(Layout)
* The structure of a new intervention is configured in a 'Layout' schema. This determines the names of other Schemas to retrieve (the Sets) for presentation
* Sets are configured with 'names' that present appropriate terminology to its users

(Navigation levels)
* An intervention consists of one or more Sets
* Creation of 'Sets' allows hierarchical organisation
* Add, Remove or Edit Sets here
* A Set contains a description
    * Includes a section for tabular-formatted information `adapt21`
* A Set can be a container holding one or more Questions
* A Set can hold a list of another Set ('sub-Set')
* A Set cannot hold both Questions and a sub-Set
* Controls. Ability to control whether data is collected for the Set
* Sets can be given custom additional fields e.g. location, password, type, shuffle etc.
* A Set can contain an audio recording
* Questions can be presented by 'order', 
  or as decided by its corresponding UI Template  (-> _A.4_)
* Custom fields can be allocated custom lists as select options `i2`
* Scenes are selectable from a preset collection `i3`
    * Scenes can be seen as the 'story books' from DSL+, or the 'animations' in Kaptein Morf
    * Scanes can be interactive
 
### Notes

* The lowest Set (that holds Questions) is referred to here as the **Question Set**
  
```
Set {
   title
   setName
   name
   description
      tables (data curated & presented in tabular form)
   control {
       tracking <- Tracking enabled (audio/video recording, events)
       cycleOn [question | set]  <- One Question per screen (e.g. DSLPlus) OR One Set per screen (e.g. ADAPT21)
   }
   scenes {   <-  Low Priority
       in: []
       out: []
       random: []
   }
   ...custom fields... (CMS-standard types, flat)
   
   holds [question | set]    <- If this is a Set holding Questions, it is the lowest Set level

   [if holds == questions]
     type [warmup | test | ?]
     ...custom fields...
     questions {}

   [else if holds == subSet]
     subSet [Empty | task ? Empty : Set]
}
```
---
**Further work needed:
Can CMS users also define the 'select' options or are they pre-defined?**

---
### 1.2	Curate Sets with Questions

(Sequenced challenges)
* A Question is the smallest unit
* There can be multiple Questions in a Set
* New Question types are created by EngageLab
* A Question will contain a data structure that models its particular requirements e.g:
  * Question text
  * Substructure e.g. categories of multiple choice questions
  * Media (image, sound, video)
* A special Question type can represent a replica of another Question by reference `i3`

```
Question {
    reference (unique) (use id?)
    type  <- Which template to use
   ...custom fields... (based on Question design - all data types)
}
```

### Notes

* Different Question types can be created to suit all projects

### 1.3	Curate Picture Books
`dsl+`
DSLPlus requires picture books that present 'overlay' animations that can also be configured in the CMS
These need also to bre specially presented inside the app.

* Squidex: Convert Picture book schema from JSON to a more usable structure

## 2. Trial Editor / RCT Administration

Section 2 requires an 'Administration' user interface running outside the CMS 

### 2.1 Assign Users, Participants and Sets (interventions)

* Begin with FEIDE2 (OAuth) connection option
* Apply for IDPorten
* Connecting users:
    * Assign Users to as Set (intervention) inside it
    * Assign 1 Participant to a User to begin with
        * Allow also for 'Groups' of participants, later
    * Do users connect themselves to a project?
        * PIN codes to join?
    * Or do Admins connect users to their project?
        * Admins must be able to find user details
* Create Groups to contain Users
* Groups will be assigned to interventions
* (Consent for a user to be checked before beginning) `i3`
* (Use Dataporten to obtain school groups) `i3`

```
User {
    userID
    role [user | monitor | admin]
    name
    groups {
        ownedGroups [ groupId ]
        myGroup
    }
    participants []
    tokens {}
    consent {}
}

Participant {
    participantID
    data {}  <--- Data about a particpant allowed to be stored based on consent
    progress {
        setId: {
            lastActive
            ...custom fields... (e.g. surveyData, introSeen)
            completions: {
                taskId: [ questionId ]
            }
        }
    }
}
```


### 2.2 Activity Monitor

* Authorised access only based on User 'role'
* Give some Users rights to access progress details etc.
* Possible to unlock further Sets in an intervention for a User
* Possible to see a User's general results as feedback to the Teacher / Researcher
  - number of repetitions attempted 
  - time spent (dosage) on each task and on entire session
  - correct vs incorrect answers 
* View progress in regard to intervention layout (-> *1.2. 1.3*)
* Possible to see and adjust the User's progress


### 2.3 Participants

CMS
* Each field can be marked 'private'
    * Private data is not sent back to server

`st` Front End
* Add a participant to record test data against
* Approved admins can modify how many children (Participants) are listed on the User's profile
* Template determines which data types are collected (name, school, fellesnummer, gender etc.)


`dsl+` Front End
* Select a participant to work on, based on IDs generated at admin-side on the user's profile
* Confim the selection
* Can also select 'self'
* Rename a subject stored at front end only - names not sent to server

### 2.4 Review

In-app overlay that allows an observer to review Participant results

`st`
* Statistics are accumulated over time
* An 'Administrator' can see all data (on tablet)
    * Can review answers
    * Change / Correct answers
* Task answers can be reviewed
* A Task should be able to highlight the given answer in this mode
* Task answers can be corrected, and 'marked' as in/correct
* Note-taking box


### 2.5 Mastery Probes

Front End
* Retrieve Mastery data from LRS
* Control progress ☕︎☕︎☕︎
    * See an evaluation of Tracking data
    * Activate or block entry to next week
    * Mark Participant as 'controlled' or not
* General statistical / status data (device status etc.)

```
Stage 1) Baseline

STUDENT        Week 0: Mastery[Tasks]
               ^                    |
RESEARCHER     '-----unbalanced-----'----approved ----> Stage 2
                Evaluate Basleine results (from Mastery tasks)

 
Stage 2) Intervention: Weekly Probes

STUDENT        Week W: Picture Book + Days[Tasks] + Mastery[Tasks] 
               ^                                                 |
RESEARCHER     '--- W = W + 1 --- approved ---------------------- 
               '--- W = W, D=0 -- rejected ----------------------
                Evaluate Fidelity Data (from regular tasks) + Probe results (from Mastery tasks)
```

#### Monitor Mastery view UI

Data needed (from LRS or TSD)
```
    Tracking: {
        itemId (mastery question ID)
        type ('mastery', 'question', 'set' or 'book') (use to filter DB search)
        duration (fidelity)
        start (fidelity)
        data: {
            participantID (use to filter DB search)
            weekID
            weekIndex (for overall progress)
            weekWord (for easy reference)
            masteryMode (baseline or probe) (use to filter DB search)
            correct (fidelity & mastery)
            round (repetition number) (highest is latest??)
        }
    }
```
Participants[] listing
* Progress overview (total weeks). Data: Highest `Tracking.data.weekIndex` for all Participants
    -> select a Participant

Participant view
* General details
* Sub-views: Baseline or Intervention
* Progress (each week): Quantity of each `Tracking.data.weekIndex` for selected Participant

Baseline view
* Stacked bar chart: Mastery Trackings: Correct, Incorrect
* Data: {Tracking[]} 

Probe view
* Stacked bar chart: Correct, Incorrect
* Fidelity table: 


1.  Probe Training session. Only can do them once. If correct moves on.
	- but more difficult when child is asked something, what their answer is.. therefore:
	2.  Allow teacher/parent to evaluate correct answer
		- preferable that Teacher does the evaluation
		- supply correct / incorrect buttons for teacher/parent on these task types


How to master? 
* Need three consecutive days showing mastery of the tasks contained
* PROBES - test items 
	Vocab intervention, picture book , tasks 1-8, PROBE


Probe:  Different types:
	1. Show a picture: Instruction: what is this?
	2. Show two pictures: Instruction: this is "A", that is ("?")
	3. Show four pictures: Instruction: Choose correct image from four



### 2.6 Sequence Control

#### 2.6.1 Sets Sequenced in an Intervention

* Linear order
* or Randomised on first entry


#### 2.6.2 Questions Sequenced in a Set

---
**Further work needed: How shoud sequencing work? How to define with flexibility?**

Questions can be sequenced by output formula or linear

```
formula {
    a: {
        threshold: 0.7
    }
    b: {
        calculation: nextQuestion = currentQuestion => calc(currentQuestion, resultData)
    }
}

Question {
    sequencing {
        type: linear | formula | custom
        calculation: null | 'a' | { threshold: 0.65 }
        
    }
}
```


---


#### Sequence Details

Sequence is very important - we need to be flexible how this works for each project

##### `km` Sequence
1 Intervention ( 3 Episodes ( many Sessions ( many Tasks ( Warmup | Test) ) ) )
Linear progression
* Sessions in order
    * Warmup Tasks in order
    * Test Tasks in order


##### `sl+` `DSL+` Sequence
1 Intervention ( many Weeks ( 3 Days ( many Tasks | Consolidation Tasks ) ) )
Linear progression
* Weeks in order
    * Days in order
        * Tasks in order (can repeat)


##### `adapt21` Sequence

1 Intervention ( many Tasks ( many Units ( many Questions ) ) )
Linear progression
* Tasks in order
    * Units in order
        * Questions **any** order (can not repeat)
    

    
#### 'Pre-intervention condition'  `sl+` `adapt21`
* An activity that must be completed to a satisfactory level before proceeding
* Satisfied by number of successful completions or number of correct items
    * Draws from Question and Question Set completion markers




## 3.	App


* Standardise each section as a component
* Always build mobile-first, responsive design

	* Which platforms / devices?
	* How to introduce styling and project-level customisation?

#### 3.0.1 Web App

* First version to function in a web browser


#### 3.0.2 Mobile App

* App released to App Store under UiO account (iOS and Android)
* Caching of media function `i3`


#### 3.0.3 Canvas LTI (Web App)

* Run within Canvas and use login from Canvas. `v4v`


### 3.1 Login

`dsl+`
* ID-Porten
    - ID-Porten for parents & others outside education sector
    - after first successful login, sae token, ask for a PIN add User to list of 'recent users'
    - allow a recent user to log in with PIN (+ stored token)


### 3.1.1 Consent

* Check logged in user with Consent Portal
    * Search for a valid consent for this user
    * Create number of Participants matching those on consent form

### 3.2 Organisation / Dashboard

* Display basic user profile
* Display user progress
    * Progress should be a standardised data structure, with customisable template (_User - 2.1_)
* Consist of a hierarchy of Sets: pages representing levels of organisation
    * e.g. Dashboard `adapt21` or Weeks, Days, Tasks `dsl`, Ship, Map `KM`
* Display Set data (available or not)
    * Descriptive HTML text, images, used in a layout customised to this project's style
    * e.g. Alien on Earth `KM` 
    * Set should be standardised data structure, with customisable template (_Sets - 1.1_)
    * Set data (_C.3_) is matched with Set Template (_A.3_)
* On load, check the current status for this user
    * User profile
    * Participants
        * Set access
        * Progress
 -> Relies on (*A.3* Set Templates)

UI
* Transition motion between levels
    * Basic
    * ↓ Advanced (old and new pages together) ☕︎☕︎☕︎
* Profile + 'quiet' mode activation (see Right Panel)
* Progress activation (see Left Panel)

#### 3.2.1 Avatar creator
Participant creation / selection

* Select a new (unused) participant?
* Enter name
* ↓ Create profile ☕︎☕︎☕︎

#### 3.2.2 Group selector
Select participants taking part in a group
 * Sliding grid of Participant avatars with checkboxes ☕︎☕︎
 * Mastery status of participants?


#### 3.2.3 Week List
* Vertical responsive scrolling item layout ☕︎☕︎
* Left & Right hand side panels
* Components:
    * Week cards
        * Main image card
        * Progress / details segment ☕︎☕︎
            * Progress
            * Mini-icon
            * Status icon (reward / locked / inProgress / checked / done)
    * Left Panel
        * Progress bar
        * Mini-icons
    * Right Panel
        * Name
        * Actions (help, logout)
            * Help (separate page completely?)
                * Video?
            * Settings

#### 3.2.4 Day List
* Sliding card layout ☕︎☕︎
* Components:
    * Day cards (background, details)
        * Progress
        * Status icon (reward / locked / inProgress / checked / done)

#### 3.2.5 Task List
* Clockwise Responsive item layout ☕︎☕︎☕︎
* Components:
    * Task Circle / Book icon
        * Status icon (reward / locked / inProgress / checked / done)

#### 3.2.6 Include Participants
* Teacher can add participants to it's profile
    * ? HOW IS THIS TO BE DONE ?

### Sequences (Question or Set)

`i1`
* Sequence is hard-coded in app for each project
* Progress stores 'completion' in the Participant's profile
* Completion of one step in the sequence produces a Tracking output
* Completion of one step in the sequence contributes to Set Progress (stored in Participant)
* Questions must produce compatible outputs used to measure completion success prior to next step 

`i2`
* A sequencing function or 'state machine' is used to control Question Set completion, Result reporting, Progress update, possible animations, and transition to next Question Set (or finish)
    * This machine can be supplied a sequence type assigned in the CMS (*2.3*)
* When each Set holding Questions is chosen, it will be ordered based on the Sequence (*2.3*), or possibly a non-linear progression (next Question set determined by result of the current one)
* Question may populate from a previous question's answer `adapt21` 
* Task produces an Answer output that **matches LTI standard** (*!*)

 -> Relies on (*2.3* Sequence Control & *2.5* Mastery Probes)
 
### 3.3.1 Mastery Sequences


---
#### The concept of Mastery - sequencing in DSL+
`dsl+`

**Baseline**
- Baseline(shown as week 0) is locked at the beginning
- A user has to finish Baseline before they can continue to the intervention
- Baseline contains a sequence of 4 expressive items, 4 receptive items and 4 indepht items.
- The items are randomly chosen from pool of predefined items
- In each item type, the items has to be from the first week and 2 other lessons.

**Probe**
- Probes are shown at the end of each day
- The probes will be checked by a researcher and approved if the answers are correct
- Probes contains a sequence of 4 expressive items, 4 receptive items and 4 indepht items.
- The items are randomly chosen from pool of predefined items
- In each item type, the items has to be from the current week and 1 other lessons.
```
Week X: Day X Interventions -> Probe at the end of the day complete -> unlocks Day X + 1, and at the same time lock Day X(previous Day inaccessible) -> repeats until everyday are completed
Week X+1(next week): Remains locked until Week X-1(previous week) Probes results are approved 
```

**How to achieve mastery?** 
* Need to satisfy three consecutive days showing mastery of the tasks contained
* Need to satisfy Probe - test items 
* Researcher unlocks the next week when the current week Probes are completed and approved

**Probe Types**
1. Expressive Types
    - Show an image(for nouns) or 2 images(for adjectives and singular/plural) or 1 video(for verbs)
    - Instruction: Adapted to each word class(An audio file).
    - Examples for Instruction: What is this?, What is he doing?
    - Content: Random items from that can be from mountain, planks, fast, friends and loud(max 12 items per lesson). 
    - Record: The teacher/parent registers the task as correct or incorrect
The ipad records audio for fidelity?

2. Receptive Types
3. Vocabulary indepht items


5. Show a picture: Instruction: what is this?
6. Show two pictures: Instruction: this is "A", that is ("?")
7. Show four pictures: Instruction: Choose correct image from four

**Sequence**
* This sequence determines when a child has achieved 'mastery' of the week's work

 ```
  ,------------------------------------- W = W + 1 ------------------- pass ----------------------------------------,
  ˅                                                                                                                 |
Baseline Probe W ---> Week W [Picture Book + Days [Tasks]] ---> Week Probe ---> Day Score Threshold + Probe Pass ---'
                      ^                                                                          |                 |
                      '------------------------------------------------------------------ fail --'  <------ fail --'
 ```

**Week 0 - Pre-Intervention Probe**
 * Will be structured into days, same shape as the main intervention
 * Requires a large set of probe items, each day will show perhaps 10
 * Randomised items

-> This can be built as another 'week'

 
### 3.4 Questions
* Lowest Set contains one or more Question types 
    * One container of Questions is presented on screen at any one time (presentation based on template)
    * The Questions are cycled if only one Question per screen
    * Or the parent Set is cycled if multiple Questions per screen
* Questions data (_C.2_) is matched with Questions Template (_A.4_)
* A link inside the CMS Question creation area leads to a demonstration as it would appear to the client in the App

 -> Relies on (*A.4* Question Templates)
 
#### Generic Format
The possibilities for presenting internal content of a Question are extremely variable, so Question data structure  may take many forms. However there should be well-defined system compatible inputs and outputs for a Question, including 'state' type data that can be used to decide which Question / Set to present next, in possible cases of non-linear progression. This data may only be needed client-side. For example:

```
resultData {
  score: 0.7   <- Level achieved
}

questionSetData {
    output {
        threshold: 0.5 <- Minimum pass level
    }
}

-> The student is allowed to move to the next Question
```

```
resultData {
    evaluation {
      score: 0.7
      direction: 3
    }
    questionSet {
        completed: true
        questions {
            id: { completed: true }
        }
    }
}

questionSetData {
    input {
        path: ['QuestionA', 'QuestionB'] <- Path already taken
    }
    output {
        threshold: 0.5
        paths: ['QuestionC', 'QuestionD', 'QuestionE', 'QuestionF']    <- Next directions
    }
}

-> The student is allowed to move to the next question, and is sent to questionF
```


#### Review & Early Exit
If the user returns to a Question Set, it should be possible to
* Reload and display the previous answer
    * If completed, prevent answers being changed (read only)  
    * If not, allow the user to continue answering

These mechanics will have to be taken care of inside the Question Set

#### Question Template ('boilerplate')
A carefully designed Question _template_ would be a useful way to structure functions needed by every question and speed the production of new Questions

### 3.5 Picture Books 
`dsl+`
Re-write Angular code from previous app to run and present picture books including animation overlays. 

Create a panel that displays narrative help
* Text to be read for the current page
* Checklist of things to do on this page

* Responsive layout ☕︎☕︎
* Sliding / Changing pages with swipe gesture ☕︎☕︎☕︎
* Components:
    * 'Tappable overlay' awareness - how to display the trigger for interactions?
    * Refine overlay components

### A.1 Record Audio & Video, Specialist Questions

* Reusable components should be build to enable recording of video and audio (web + mobile)
* Data should be saved to device storage (mobile)
* Audio or Video files should have a reference included in the Answer or Tracking data
* Aduio or Video should be transferred to secure storage as part of the Answer or Tracking submission
* These tools should enhance existing Cordova code established in the lab to reduce development time
* Other components may be needed (e.g. Drawing)

`st`
* Child (User) input is **oral only**
    * Requires Audio recording across Task or entire Task set
    * Allow possible override of recording in Review? (*4.3*)
    * Up to 800 children will use the app
    * Up to 20 tests
        * Each test 20 - 50 items (10 seconds per item)

---
**Further work needed:**
 * Define a collection of input components to support?
 * teSTand Visualisations?
 
---

### A.2.1 Answers and Tracking Data

* Results need to be saved locally until able to be posted to the Server
* Results are separate from Progress
    * Results data tells us how the user answered the questions
* Tracking is separate from Results!
    * Tracking data tells us what actions the user performed on screen
* Data must be forwarded on to TSD or LRS, this is for the Server to decide absed on data type
    * Answers & Tracking DATA to LRS
    * Tracking FILES to TSD
* Results may contain data that is sensitive, remove local copy after successful post
    * This has been a major point of contention in cases where data was not correctly posted. **Thorough testing is required**
* (Results data will need to be retrieved if the software is asked to review a previously completed Task)
    * The 'review' feature may not be available if data is deemed sensitive

### A.2.2 Progress Tracking

* Each time a Question or Set is completed, not this as progress on the user's Model
* Progress should be able to recover the User's position in the project after reloading the app
* Progress data should be displayable visually

### A.3 Set Templates

* HTML views that can present a customised view of a Set level
* Area to display introduction page form CMS (HTML)

### A.4 Question Templates
* These are components each custom made to represent a specific Question type
* Data to populate the component (image, sound, text) is loaded from the CMS
* They may be simple or complex, and possibly include other components such as video player
* **Important not to use external libraries unless absolutely necessary**
* Questions should be designed responsive mobile-first 
* _possible exceptions for mobile telephone_

`i1`
* Create a selection of good examples `sl+`

`i2`
* Recreate the 24 task types as they functioned previously (DSL+ Vanderbilt Uni version) `dsl+`

`i3`
* Create 'Mastery tasks' `dsl+`

___
**Define a reusable sub-components for this**
 e.g. button types, flip cards, etc.
___

### A.5 Server API

* Secure connection
* Transfer login, user details, CMS data, results

### A.6 Device API

* App uses Cordova functions to attach to device for access to
    * File storage
    * Microphone
    * Camera
* Some of this functionality can be taken from other EngageLab projects

### A.7 Animations
* Present the picture books as they were previously `dsl+`
* A Sequence can trigger 'intro' and 'outro' play scenes surrounding Tasks
* A Sequence can include the option to randomly display an animation or 'cut scene'
* An animation can be used as a 'character' or 'avatar' who speaks instructions and appears at times throughout the app
* Present animations in a module that can display as full screen, or as overlay / sub-screen

### A.8 Question Preview
* See a preview of a Question's appearence in the app directly from the CMS.
* Use this format in Squidex > Schemas > (schema) > More > Preview URLs:
  `https://[app.host]/#/sample/slplus/dslplus/${schemaName}/${id}`
  
    * slplus -- project name (determines project queried for data)
    * dslplus -- project type (determines templates used to display data)
    * ${schemaName} -- interpolated from schema data **do not change this**
    * ${id} -- interpolated from schema data **do not change this**

### A.9 Local Data
* Allow login to app without internet access
* Save models to device (App, User, Participant, Answer, Tracking)

Cache:
* Use the Squidex API to get a listing of all assets
* Write a script that downloads all assets to the local build
* Ensure the app finds these assets locally instead of online, if available


## 4. Integration

### SERVER

### S.1 API

* Receives, processes and returns calls for data from
    * CMS
    * Trial Editor
    * App
    * Monitor
    * FEIDE
    * Consent Server
    * TSD Storage
    * LTI Server
    * SL+ Database
---
**Further work needed: Define Routes**

---

### S.2 Database

Models:

```
User
Group
Intervention
Set
Task
Question
Result
```

### S.3 TSD Connector

* Send data to TSD using the API
* JSON structured files
* Data files (M4A audio, MP4 video)
* Video and audio goes to TSD, not to be stored on our server


### CMS

### C.1 Content Management System
* CMS will be open source
  * Self hosted
  * Suitable Query language (GraphQL?)
  * Attach media with asset preview
  * Localisation (multi-language) support
  * Draft / Publish
  * Versioning
  * Webhooks
  * Custom plugins / content editors
      * Blocks as HTML?


Most likely candidate at this point is squidex.io/comparison

#### CMS Comparison (our needs)

```
                        Sanity           Strapi                   Squidex
    Rich Text                       
      - Front           ✓                with ShowdownJS(*1)      with CKE Editor
      - Back            ✓                markdown                 html
    Tables              ✓                with ShowdownJS(*1)      with CKE Editor
    Custom Plugins      ✓                ✓                        editors & integrations


```
(*1) ShowdownJS provides useful functions, but has 110 open issues.. https://github.com/showdownjs/showdown/issues

(*2) CKE Editor 5 can be added as an 'editor' to the CMS. 
Editors are a HTML file that need to be hosted somewhere, see:
https://github.com/Squidex/squidex-samples/blob/master/editors/cke-simple.html

### C.2 Set Type Data

Stored data for each instance of each Question Type 
* Based on the representative data structure created to model this 
* Curated using forms provided by the CMS
* Create an appropriate GraphQL query to obtain this data
* **Input real data for all projects**

### C.3 Question Type Data

Stored data for each instance of each Set and Task  
* Curated using forms provided by the CMS
* Create an appropriate GraphQL query to obtain this data
* **Input real data for all projects**


-----------------------------------
# DSLPlus - Specific Specifications




### C.2, C.3
* Toggle to turn off recording
* Toggle to randomise
* Getting old data into the new system?
