function buildLearnEntry(term, definition, oncontinue) {
    let html = `
    <div is-study-mode="true" class="learn full-page-view">
        <div>
            <h3 id="learn-term">${term}</h3>
            <p id="learn-definition">${definition}</p>
            <div style="text-align:center; width: 100%;">
                <button>Continue</button>
            </div>
        </div>
    </div>
    `
    let obj = htmlToObj(html);
    obj.querySelector('button').onclick = oncontinue;

    return obj;
}

function buildMCEntry(term, definition, answers, onanswer) {
    let html = `
    <div is-study-mode="true" class="mc full-page-view">
        <div>
            <h3 id="mc-question">${term}</h3>
            <div class="mc-answers">
                <button>${answers[0]}</button>
                <button>${answers[1]}</button>
                <button>${answers[2]}</button>
                <button>${answers[3]}</button>
            </div>
        </div>
    </div>
    `
    let obj = htmlToObj(html);
    let buttons = obj.querySelectorAll('.mc-answers > button');
    buttons.forEach((button, index) => {
        button.onclick = () => {
            onanswer(index);
        }
    });
    
    return obj;
}

function buildMasteryEntry(term, onanswer, onhint, trainMode=false) {
    let html = `
    <div is-study-mode="true" class="mastery full-page-view">
        <div>
            <h3 id="mastery-question">${term}</h3>
            <div class="mastery-input-container">
                <input id="mastery-input">
            </div>
            <div class="horizontal-button-panel" style="display: flex;">
                <button class="glass-button" id="hint" style="flex: 1;">Hint</button>
                <button class="glass-button" id="submit" style="flex: 2;">Submit</button>
            </div>
        </div>
    </div>`
    let obj = htmlToObj(html);
    obj.querySelector('#submit').onclick = () => {
        onanswer(obj.querySelector('#mastery-input').value);
    }
    obj.querySelector('#hint').onclick = () => {
        onhint(obj.querySelector('#mastery-input').value);
    }
    obj.querySelector('#mastery-input').onkeypress = (e) => {
        if (e.key === 'Enter') {
            onanswer(obj.querySelector('#mastery-input').value);
        }
    }
    if (trainMode){
        obj.querySelector('#hint').style.display = "none";
    }

    return obj;
}

function buildCompletionEntry(study_mode, oncontinue, onreset) {
    let html = `
    <div is-study-mode="true" class="mastery full-page-view">
        <div>
            <h1>${study_mode} Complete!</h1>
            <p>You've completed ${study_mode}. You can continue with random questions or reset your progress and start over.</p>
            <div class="horizontal-button-panel" style="display: flex; margin-top: 20px;">
                <a href="view" style="display: flex; align-items: center; justify-content: center;" class="glass-button"><img style="width: 40px; height: 40px"></a>
                <button class="glass-button" id="reset" style="flex: 1;">Reset</button>
                <button class="glass-button" id="continue" style="flex: 1;">Continue</button>
            </div>
        </div>
    </div>`
    let obj = htmlToObj(html);

    obj.querySelector('#continue').onclick = oncontinue;
    obj.querySelector('#reset').onclick = onreset;

    return obj;
}

function buildTrainCompletionEntry(){
    let html = `
    <div is-study-mode="true" class="mastery full-page-view">
        <div>
            <h1>${study_mode} Complete!</h1>
            <p>You've completed ${study_mode}. You can reset your progress and start over, or return to the Studysheet page.</p>
            <div class="horizontal-button-panel" style="display: flex; margin-top: 20px;">
                <button class="glass-button" id="reset" style="flex: 1;">Reset</button>
                <button class="glass-button" id="continue" style="flex: 1;">Back</button>
            </div>
        </div>
    </div>`
    let obj = htmlToObj(html);
    let url = window.location.href;
    url = url.split("/")
    let strurl = ""
    for (let i = 0; i < url.length-1; i++){
        strurl+=url[i]+'/';
    }
    strurl+="view"
    obj.querySelector('#continue').onclick = `window.location.href=${strurl}`;
    //obj.querySelector('#reset').onclick;

    return obj;
}