All Product ->
Home
Creating Chapter
Creating Lesson
Creating Task

Using -- chapter component:

How to use?

Add below depedencies into your FPM.ftd file

Locate FPM.ftd and copy below into it
-- fpm.dependency: fifthtry.github.io/workshop-page as ws

-- fpm.auto-import: ws
Now create your workshop.ftd file and start using below components. If you are using doc-site do not include -- ds.page because -- ws.chapter has with header and toc inbuilt.

How to create new chapter?

We have created three components in workshop page. -- ws.chapter: , -- ws.lesson: and -- ws.task:

Let’s understand how to use -- ws.chapter: component.

Add below lines into your workshop.ftd file
-- boolean $what-are-chapter-completed: false
$always-include$: true

-- object what-are-chapter-object:
function: ls.set-boolean
variable: $what-are-chapter-completed

-- understood what-are-chapter-button: Completed --> button title
$on-click$: toggle $what-are-chapter-completed
$on-click$: message-host $what-are-chapter-object
$lesson-status: $what-are-chapter-completed
Add below code snippet as it is in your FTD file. You can change button title if required.
How to use -- ws.chapter? use below code snippet
-- ws.chapter: Chapter title
id: ws-page --> ID is importart to swich from one container to another
sidebar: true --> Remove this line if sidebar not needed
$status: $what-are-chapter-completed --> sets localstorage once chapter completed

Some chapter body here. You can also include `FTD` components like 
code-block etc in this section of chapter body.

At -- ws.chapter: page bottom right you will see Completed button. On click of this button, what-are-chapter-completed localstorage variable will be set to true on user’s browser.

This means user has done and understood the chapter. Chapter completion message will be shown to user once they click on Completed button.

See working demo below, click on Completed button to see the how it works.
Need Help?

Please join our Discord to ask any questions related to this workshop!

Or just meet the others who are learning FTD like you :-)

ℹ️
Github Repo
The code for this workshop can be found on Github: ftd-lang/ftd-workshop.
Join The Next Session
The next remote workshop would be happening on 4th Nov 2022. Learn more here.