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')
}

3. 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>

2. 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)