Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ax-tutorials

aexeagmbh1ISC0.4.0

How To Use

readme

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)