Admin Setting: Online Training

###### tags: `Admin Settings` # Admin Setting: Online Training ## Sign Up If you are not signed up yet, please sign up and get the base url for the online training as below. **URL for end-users** ``` https://programname.web.app ``` **URL for administrators** ``` https://company-name-v3-uniquekey.web.app ``` ## Open Training You can open the online training page to access the url as below. **URL for end-users** ``` https://programname.web.app/training ``` **URL for administrators** ``` https://company-name-v3-uniquekey.web.app/training ``` ## Overview Online Training has a 3-layer construction. - Training Course - Training Module No.1 - Training Section No.1-1 - Training Section No.1-2 - Training Section No.1-3 - Training Module No.2 - Training Section No.2-1 - Training Section No.2-2 - Training Section No.2-3 - Training Module No.3 - Training Section No.3-1 - Training Section No.3-2 - Training Section No.3-3 ## Traning Course A training course has single or multiple modules under it. ## Sequential Course - Training modules under a sequential course can be started from the first module. - The second module can be started when the first one is finished. - The training course is finished when the last module is finished. ## Group Course - Training modules under a group course can be started from any one of them. - The training course is finished when all the modules are finished. ## Traning Module A training module has single or multiple sections under it. - [Traning Section](/@bo-doc/online-training-training-section) A training section has a training content. ## Carousel Section - A carousel section has single or multiple slides to show. - A carousel section can also have a text description. ## Video Section - A Video section has a video material. - The video material can be automatically/manually started. - A Video section can also have a text description. - A video section can have video controller buttons as below. ### Video Buttons Each button can be set displayed or undiplayed. - Play - Pause - Replay - +5/+10/+30 Sec - -5/-10/-30 Sec - x2/x0.5 Speed - Mute/Unmute ## Image Section - An image section has single image to show. - An image section can also have a text description. ## Quiz Section - A quiz section has a button to open the link of a quiz page. - A quiz section can also have a text description. ### Quiz Page - A quiz page has single/multiple questions. - A quiz page has a time limit. (Default time limit = 10 minuts) - The question type can be chosen from multiple platform as below. #### Radio button - The user can select only one answer from single or multiple options. #### Checkbox - The user can select one or more answers from single or multiple options. #### Free texting - The user can write down the answer in a texting area. Settings --- ## Create a course # Create a Training Course :::info Creating a training course is operated by system administrators. Please open the url for administrators as below. ``` https://company-name-v3-uniquekey.web.app/training ``` ::: ## Operation ![](https://i.imgur.com/1TkTeRm.jpg) 1. Click ![](https://i.imgur.com/9he4Qoz.png) to open the builder dialog. ![](https://i.imgur.com/J638rS4.png) 2. Select "new" in COURSE field. ![](https://i.imgur.com/VxSHrw8.png) 3. Click ![](https://i.imgur.com/cGUy5CC.png) to open the setting menus. ![](https://i.imgur.com/j89iF96.png) 4. Change training title with kebab-case format and input setting fields. ![](https://i.imgur.com/tSNJoG2.png) 5. Click SAVE & RELOAD ![](https://i.imgur.com/mdysNvW.png) ## Settings :::info You can open an example training course with default settings to access the link as below. ``` https://company-name-v3-uniquekey.web.app/training/new ``` ::: ### New Training Course ![](https://i.imgur.com/drtxBP0.jpg) ### Course Title <hr> **Parameter** ``` title ``` **Format** ``` String ``` **Default Value** ``` Course Title ``` ### Course Sub Title <hr> **Parameter** ``` subTitle ``` **Format** ``` String ``` **Default Value** ``` Course Sub Title ``` ### Text Description **Parameter** ``` text ``` **Format** ``` Markdown ``` **Default Value** ``` Course Description ``` ### Image <hr> **Parameter** ``` image ``` **Format** ``` JSON ``` **Default Value** ``` { "url" : "DummyImage" } ``` To place an image set the image file link as a value of url: ``` DummyImage ``` ### Big Image <hr> **Parameter** ``` bigImage ``` **Format** ``` JSON ``` **Default Value** ``` { "url" : "DummyImage" } ``` To place a big image set the image file link as a value of url: ``` DummyImage ``` ### Order Number <hr> **Parameter** ``` order ``` **Format** ``` Number ``` **Default Value** ``` 1 ``` ### Sequential Course <hr> **Parameter** ``` isSequentialCourse ``` **Format** ``` String ``` **Default Value** ``` true ``` ### Group Course <hr> **Parameter** ``` isGroupCourse ``` **Format** ``` Boolean ``` **Default Value** ``` false ``` ## Create a module # Create a Training Module :::info Creating a training modlue is operated by system administrators. Please open the url for administrators as below. ``` https://company-name-v3-uniquekey.web.app/training/course-name ``` ::: ## Operation ![](https://i.imgur.com/F0PsUzj.jpg) 1. Click ![](https://i.imgur.com/9he4Qoz.png) to open the builder dialog. ![](https://i.imgur.com/X0evCOD.jpg) 2. Select the course name in COURSE field. ![](https://i.imgur.com/0Pn75Br.jpg) 3. Click ![](https://i.imgur.com/cGUy5CC.png) to open the setting menus. ![](https://i.imgur.com/BL9e4fH.png) 4. Select "new" in MODULE field. ![](https://i.imgur.com/0hBT9XD.png) 5. Click ![](https://i.imgur.com/cGUy5CC.png) to open the setting menus. ![](https://i.imgur.com/NT3sQpm.png) 6. Change training title with kebab-case format and input setting fields. ![](https://i.imgur.com/qDqZYXB.png) 7. Click SAVE & RELOAD ## Settings :::info You can open an example training course with default settings to access the link as below. ``` https://company-name-v3-uniquekey.web.app/training/new ``` ::: ### New Training Module ![](https://i.imgur.com/U9LWMtA.jpg) ### Module Title <hr> **Parameter** ``` title ``` **Format** ``` String ``` **Default Value** ``` Module Title ``` ### Module Sub Title <hr> **Parameter** ``` subTitle ``` **Format** ``` String ``` **Default Value** ``` Module Sub Title ``` ### Text Description **Parameter** ``` text ``` **Format** ``` Markdown ``` **Default Value** ``` Module Description ``` ### Image <hr> **Parameter** ``` image ``` **Format** ``` JSON ``` **Default Value** ``` { "url" : "DummyImage" } ``` To place an image set the image file link as a value of url: ``` DummyImage ``` ### Order Number <hr> **Parameter** ``` order ``` **Format** ``` Number ``` **Default Value** ``` 1 ``` ## Create a section :::info Creating a training section is operated by system administrators. Please open the url for administrators as below. ``` https://company-name-v3-uniquekey.web.app/training/course-name ``` ::: ## Operation ![](https://i.imgur.com/hmE6pTj.jpg) 1. Click ![](https://i.imgur.com/9he4Qoz.png) to open the builder dialog. ![](https://i.imgur.com/XFMLNU4.jpg) 2. Select the course name in COURSE field. ![](https://i.imgur.com/2397ipf.jpg) 3. Click ![](https://i.imgur.com/cGUy5CC.png) to open the setting menus. ![](https://i.imgur.com/xqUVqvK.png) 4. Select the course name in MODULE field. ![](https://i.imgur.com/rBw0dnZ.png) 5. Click ![](https://i.imgur.com/cGUy5CC.png) to open the setting menus. ![](https://i.imgur.com/e9j5znN.png) 6. Select "new" in SECTION field. ![](https://i.imgur.com/UcGxpxI.png) 7. Click ![](https://i.imgur.com/cGUy5CC.png) to open the setting menus. ![](https://i.imgur.com/Z4VBRdN.png) 8. Change training title with kebab-case format and input setting fields. ![](https://i.imgur.com/qJCbjyY.png) 9. Click SAVE & RELOAD ![](https://i.imgur.com/j4gxzGz.png) ## Settings :::info You can open an example training course with default settings to access the link as below. ``` https://company-name-v3-uniquekey.web.app/training/new/module/new ``` ::: ### New Training Section ![](https://i.imgur.com/NE9Aeow.jpg) ### Section Title <hr> **Parameter** ``` sectionTitle ``` **Format** ``` String ``` **Default Value** ``` Section ``` ### Title <hr> **Parameter** ``` title ``` **Format** ``` String ``` **Default Value** ``` Section Title ``` ### Sub Title <hr> **Parameter** ``` subTitle ``` **Format** ``` String ``` **Default Value** ``` Section Sub Title ``` ### Text Description **Parameter** ``` text ``` **Format** ``` Markdown ``` **Default Value** ``` Section Description ``` ### Carousel <hr> **Parameter** ``` carousel ``` **Format** ``` JSON ``` **Default Value** ``` { "1": { "image": { "url": "DummyImage", "aspectRatio": 2 }, "order": 1 }, "2": { "image": { "url": "DummyImage", "aspectRatio": 2 }, "order": 2 } } ``` Setting for each slide: ``` { "image": { "url": "DummyImage", "aspectRatio": 2 }, "order": 1 } ``` Slides in a carousel is ordered by the value of order: ``` 1 ``` To place an image set the image file link as a value of url: ``` DummyImage ``` To change the aspect ratio set the ratio as a value of aspectRatio: ``` 2 ``` ### Image <hr> **Parameter** ``` image ``` **Format** ``` JSON ``` **Default Value** ``` { "url" : "DummyImage" } ``` To place an image set the image file link as a value of url: ``` DummyImage ``` ### Big Image <hr> **Parameter** ``` bigImage ``` **Format** ``` JSON ``` **Default Value** ``` { "url" : "DummyImage" } ``` To place a big image set the image file link as a value of url: ``` DummyImage ``` ### Video <hr> **Parameter** ``` video ``` **Format** ``` JSON ``` **Default Value** ``` { "url": "DummyVideo", "loadingImage": "DummyLoadingImage", "readyImage": "DummyReadyImage", "autoPlay": false, "controls": false, "muted": false, "progressLinearColor": "primary", "videoButton": { "play": true, "pause": true, "replay": true, "minus5Sec": true, "minus10Sec": true, "minus30Sec": true, "plus5Sec": true, "plus10sec": true, "plus30Sec": true, "halfSpeed": true, "twiceSpeed": true, "mute": true, "unmute": true } } ``` To place a video set the image file link as a value of url: ``` DummyVideo ``` ### Order Number <hr> **Parameter** ``` order ``` **Format** ``` Number ``` **Default Value** ``` 1 ``` ### Complete Section Checkbox <hr> **Parameter** ``` completeSection ``` **Format** ``` String ``` **Default Value** ``` Complete Section ``` Set Null as the value to inactivate the checkbox. ### Open Test Button <hr> **Parameter** ``` openTest ``` **Format** ``` JSON ``` **Default Value** ``` { "title": "Open Test", "link": { "to": { "name": "page", "params": { "pageName": "dummy", "pageType": "inputTraining" } } } } ``` Set Null as the value to inactivate the button. Set the button title as a value of title: ``` Open Test ``` Set the page name with kebab-case format as a value of PageName: ``` dummy ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.