0.4.0 • Published 6 years ago
ax-tutorials v0.4.0
tutorials / e-learning next
How To Use
Create a new lesson
- add a folder in the root directory
- add folder to the listing in
index.js
like that:
'machine-name' () {
return import(/* webpackChunkName: "tutorial:machine-name" */ './folder-name')
}
- 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
- 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>
- 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)
0.4.0
6 years ago