Add createExerciseCard function

/** API to create cards for exercises */

import { createCard, setCardHoverTitle } from "./cards.mjs"

import { createElementWithClass } from "./util.mjs"

/**

 * Changes the appearance of the given exercise card so it looks like it is solved

 * (this method does not care if the exercise is actually solved)

    return [confirmButton, resetButton]

}

/**

 * Create a DOM card for the given exercise

 * @param {Exercise} exercise The exercise

 * @param {Number} exerciseIndex The index of the exercise

 * @param {Function} onTitleClick Event handler for click on the title

 */

 export function createExerciseCard(exercise, exerciseIndex, onTitleClick) {

    const cardEl = createCard(exercise.name, "#"+exerciseIndex)

    cardEl.classList.add("exercise")

    cardEl.dataset.exerciseIndex = exerciseIndex

    // Add Bootstrap Icon's 'bi' class to the heading, because it will apply styles to

    // the h2::before element, whose content we set automatically in CSS, depending on the

    // solved state of the exercise

    cardEl.querySelector(".title h2").classList.add("bi")

    const descriptionEl = createElementWithClass("p", "description")

    const actionsEl = createElementWithClass("div", "actions")

    actionsEl.append(...createExerciseCardActionButtons(

        exercise.manuallyConfirm.bind(exercise)

    ))

    cardEl.querySelector(".content").append(descriptionEl, actionsEl)

    // When the title bar of an exercise is clicked, skip to that exercise

    const titleEl = cardEl.querySelector(".title")

    titleEl.addEventListener("click", onTitleClick)

    return cardEl

}