I'm creating an educational website with a lot of interactive exercises. Each exercise has a function which generates each question/answer combination. At the moment I am importing all of these from a file:
import * as exerciseHelpers from "../helpers/exercise_helpers.js";
Inside the helper file each exercise has its function:
export function exercise1() {
//stuff for exercise 1
}
export function exercise2() {
//stuff for exercise 2
}
I am worried this file will get very hard to maintain with 100s of exercises. Also I don't really want to load in all the functions just to call the one relating to the current exercise.
When I'm running the exercise I call:
exerciseHelpers[thisExerciseFunction]();
Ideally I'd like to create each function in its own file exercise1.js/exercise2.js etc, and then just import the one I need.
But it seems I can't import functions based on a variable.
Is there a better way to organise this so each of these functions can be in a separate file that is loaded in when needed?
Create an index.js file in your helpers directory. Inside index.js export all your functions from their respective files, like:
export * from './exercise1.js';
export * from './exercise2.js';
Then you can have all your utility functions in their own files but still import everything from index.js:
import * as exerciseHelpers from '../helpers';
Or you can import the one you need with named import:
import { exercise1 } from '../helpers';