tutorials / e-learning next

How To Use

Create a new lesson

1. add a folder in the root directory
2. add folder to the listing in index.js like that:

'machine-name' () {
    return import(/* webpackChunkName: "tutorial:machine-name" */ './folder-name')
}

1. add an index.js inside the folder:

export default {
    name: 'machine-name',
    label: 'Human Name',
    steps: [
    ]
}

machine-name needs to be stable, don't change it after you created a lesson! (machine-name and folder-name can be the same)

Add steps to a lesson

1. inside your lesson folder, add a file file-name.vue with:

<template lang="jade">
# MARKDOWN HERE
</template>
<script>
export default {
    name: 'machine-name',
    label: 'A New Step',
    layout: 'bottom', // 'fullpage', 'bottom^'
    autoNext: true, // automatically go to next step if this step is completed?
    complete () {
        // define a function to check if the user finished this step
        // this.$route: https://router.vuejs.org/api/#route-object-properties (for checking navigation)
        // this.$store.state for application data (ask rash for more info)
        return this.$store.state.teapot.size = 'little'
    }
}
</script>

1. add the created step to the lesson definition index.js INSIDE the folder

import machineName from './file-name' // without '.vue' // <=== HERE
export default {
    name: 'machine-name',
    label: 'Human Name',
    // this determines the order of the steps
    steps: [
        machineName // <=== AND HERE
    ]
}

machine-name needs to be stable, don't change it after you created a lesson! (machine-name and file-name can be the same)

special markdown syntax

Beacon

You can create buttons which highlight an element in the ui on click

@[click me](#a-css-selector)