New MCQ card template

Anki Card Design
1

Hello people,
Through doing many anki reviews and wanting a new template to make it more interactive and versatile, I ended up making this new template that allows you to have a bunch of statements and two options to choose from re. the sentence (e.g. Paris is the capital of France. True | False). These two options are customisable.

I just wanted to share this template in case other people may benefit from it. N.B. In the answer terms you choose 1 or 2 depending on which option your term refers to.

Screenshot 2024-12-12 090145
Screenshot 2024-12-12 0901451115×665 35.5 KB

Front template:

<div class="card">
    <h1>{{Title}}</h1>
    <form id="quiz">
        <div id="terms-container"></div>
    </form>
</div>

<script>
    // Function to load and initialize the quiz
    function loadQuiz() {
        // Clear the previous content in the terms container
        const termsContainer = document.getElementById('terms-container');
        termsContainer.innerHTML = ''; // Reset content

        // Collect all terms and their associated options into an array
        const terms = [
            { term: "{{Term1}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer1}}" },
            { term: "{{Term2}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer2}}" },
            { term: "{{Term3}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer3}}" },
            { term: "{{Term4}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer4}}" },
            { term: "{{Term5}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer5}}" },
            { term: "{{Term6}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer6}}" },
            { term: "{{Term7}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer7}}" },
            { term: "{{Term8}}", option1: "{{Option1}}", option2: "{{Option2}}", answer: "{{Answer8}}" }
        ];

        // Function to shuffle terms array
        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]]; // Swap elements
            }
        }

        // Shuffle the terms before displaying them
        shuffle(terms);

        // Object to store the correct answers for shuffled terms
        const correctAnswers = {};

        // Dynamically create the HTML for each term and its options
        terms.forEach((term, index) => {
            // Ensure that both the term and options are not empty
            if (term.term && term.option1 && term.option2 && term.answer) {
                const termRow = document.createElement('div');
                termRow.classList.add('term-row');
                termRow.innerHTML = `
                    <span class="term">${term.term}</span>
                    <button type="button" class="choice" data-term="${index + 1}" data-answer="1">${term.option1}</button>
                    <button type="button" class="choice" data-term="${index + 1}" data-answer="2">${term.option2}</button>
                `;
                termsContainer.appendChild(termRow);

                // Map the correct answer for the shuffled term
                correctAnswers[index + 1] = term.answer;
            }
        });

        // JavaScript to handle answer selection
        document.querySelectorAll('.choice').forEach(button => {
            button.addEventListener('click', (event) => {
                const termId = event.target.dataset.term;
                const selectedAnswer = event.target.dataset.answer;
                const isCorrect = selectedAnswer === correctAnswers[termId];

                event.target.classList.add(isCorrect ? 'correct' : 'incorrect');
                event.target.disabled = true;

                const siblings = Array.from(event.target.parentElement.querySelectorAll('.choice'));
                siblings.forEach(sibling => sibling.disabled = true);

                if (isCorrect) {
                    event.target.parentElement.classList.add('row-correct');
                } else {
                    event.target.parentElement.classList.add('row-incorrect');
                }
            });
        });
    }

    // Load the quiz every time the script is executed
    loadQuiz();
</script>

Back Template:

<div style="text-align: center; font-size: 25px; color: #90EE90; font-weight: bold;">
    {{Extra}}
</div>

Styling:

.card {
    font-family: Arial, sans-serif;
    text-align: center;
    color: white;
    background-color: #;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    color: turquoise;
    margin-bottom: 20px;
}

.term-row {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.term {
    margin-right: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

button.choice {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    background-color: #;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

button.choice:hover {
    background-color: #;
}

button.correct {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

button.incorrect {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.row-correct {
    background-color: rgba(40, 167, 69, 0.1);
}

.row-incorrect {
    background-color: rgba(220, 53, 69, 0.1);
}

Fields:
Title
Option1
Option2
Term1
Answer1
Term2
Answer2
Term3
Answer3
Term4
Answer4
Term5
Answer5
Term6
Answer6
Term7
Answer7
Term8
Answer8
Extra

4 Likes
2

Thanks, added to Multiple Choice Questions (MCQs) Templates

1 Like