Training Stages

What are training stages?

Training modes can (and should, if it's applicable) use the so called TrainingStages to represent different stages of the execution of the algorithm or different kinds of training questions. Training stages are used across several Training-related components to display stage specific things.

How to use TrainingStages in my training mode?

In src/hooks/TrainingStagesStore.ts there is a zustand defined which includes a list of TrainingStages and the index of the currently active stage. A TrainingStage includes the following information:

interface TrainingStage {
	stageId: number; // to reference the algorithm stages
	title: string; // title in header
        shortTitle?: string; // displayed in the progressbar
	info?: string; // for info modal
        // used in evaluation:
	wrongAnswers?: number;
	answers?: number;
}

There are several setter, getters and convenience functions defined to work with the stages. resetStages: () => void; Resets the stages, should be called on unmount of a training page which set the stages before.

getStageList: () => TrainingStage[]; Returns the list of all currently available stages.

setStageList: (stageList: TrainingStage[]) => void; Sets the currently available stages and resets the current stage to 0.

getCurrentStage: () => TrainingStage | undefined; Return the stage with stageId === currentStage if it exists.

setCurrentStage: (id: number) => void; Sets the currentStage value.

nextStage: () => boolean; Tries to move to the next stage, with stageId === currentStage + 1 or goes back to 0 if currentStage + 1 exceeds the number of available stages. Returns true if such a page is available and the currentPage was updated and false otherwise.

getStage: (id: number) => TrainingStage | undefined; Return the TrainingStage with stageId === id if available.

Usually, an enum is used to define the stageIds. To increase the number of presented questions, you can add the line: getStage(id)!.answers! += 1;.

Example for a training mode with 3 stages and evaluation for the second stage:

import { useTrainingStagesStore } from "../../hooks/TrainingStagesStore";

enum TrainingStages {
    Initialization,
    Selection,
    Review,
}

export const MyTrainingPage: React.FC<ITrainingPageProps> = ({ }) => {
    const { resetStages, setStageList } = useTrainingStagesStore();

    useEffect(() => {
        setStageList([
            {
                stageId: TrainingStages.Initialization,
                title: "Prepare yourself for some delish ice cream",
                shortTitle: "Preparation",
                info: "This text will be displayed in a modal!",
            },
            {
                stageId: TrainingStages.Selection,
                title: "Select the best ice cream",
                shortTitle: "Selection",
                answers: 1,
                wrongAnswers: 0,
            },
            {
                stageId: TrainingStages.Review,
                title: "Vegan Tiramisu ice cream is a great choice!",
            },
        ]);

        // Reset the stages on unmount!
        return resetStages;
    }, []);
...
}

Where are TrainingStages used?

The TraningFormWithHeader component display the title of the current stage in it's header. If the info property is defined for a stage, an info icon will be displayed in the header that, if clicked, displays the given string in a modal.

Progressbar

The Training component uses the stages to display a progressbar on top of the training page. The shortTitle is displayed for every stage, if it is left undefined, the stage won't appear in the progressbar. The progressbar uses daisyUi "Steps" and highlights the stage returned by getCurrentStage()

Evaluation

The TrainingEvaluation component uses the training stages to display stage specific evaluations using Chart.js. Therefore it displays a chart for each stage which has a not undefined value for wrongAnswers and answers, where answers should represent the number of questions presented to the user and wrongAnswers is the amount of wrongly answered questions.