Anki - Multiple Choice Question (MCQ) Template

anki-mcq.txt

<!-- Fields: Question, Choice1, Choice2, Choice3, Choice4, Choice5 -->
<!--         Correct1, Correct2, Correct3, Correct4, Correct5      -->
<!--         Explanation                                           -->

<!-- Front Template -->
<div class="quiz-wrapper">
    <div class="quiz-container">
        <span class="badge">MCQ</span>
        <div class="question-text">{{text:Question}}</div>
        
        <div class="choices-container">
            {{#Choice1}}
            <button class="choice-btn" onclick="handleChoice(this, '{{Correct1}}', 'A')">
                <span class="choice-label">A</span>
                <span class="choice-text">{{text:Choice1}}</span>
            </button>
            {{/Choice1}}
            
            {{#Choice2}}
            <button class="choice-btn" onclick="handleChoice(this, '{{Correct2}}', 'B')">
                <span class="choice-label">B</span>
                <span class="choice-text">{{text:Choice2}}</span>
            </button>
            {{/Choice2}}
            
            {{#Choice3}}
            <button class="choice-btn" onclick="handleChoice(this, '{{Correct3}}', 'C')">
                <span class="choice-label">C</span>
                <span class="choice-text">{{text:Choice3}}</span>
            </button>
            {{/Choice3}}
            
            {{#Choice4}}
            <button class="choice-btn" onclick="handleChoice(this, '{{Correct4}}', 'D')">
                <span class="choice-label">D</span>
                <span class="choice-text">{{text:Choice4}}</span>
            </button>
            {{/Choice4}}
        </div>
    </div>
</div>

<script>
    function handleChoice(button, isCorrect, choice) {
        // Reset classes for all buttons
        document.querySelectorAll('.choice-btn').forEach(btn => {
            btn.className = 'choice-btn';
        });

        // Add selected state and apply correct/incorrect styles
        button.classList.add('selected');
        if (isCorrect === 'true') {
            button.classList.add('correct');
        } else {
            button.classList.add('incorrect');
            // Highlight the correct choice
            document.querySelectorAll('.choice-btn').forEach(btn => {
                if (btn.getAttribute('onclick').includes("true")) {
                    btn.classList.add('correct');
                }
            });
        }

        // Store selected choice and correct answer state in localStorage
        localStorage.setItem('selectedChoice', choice);
        localStorage.setItem('correctChoice', isCorrect);
        setTimeout(() => pycmd('ans'), 500);
    }
</script>


<!-- Back Template -->
<div class="quiz-wrapper">
    <div class="quiz-container">
        <span class="badge">Answer</span>
        <div class="question-text">{{text:Question}}</div>
        
        <div class="choices-container">
            {{#Choice1}}
            <button class="choice-btn" id="choice-a">
                <span class="choice-label">A</span>
                <span class="choice-text">{{text:Choice1}}</span>
            </button>
            {{/Choice1}}
            
            {{#Choice2}}
            <button class="choice-btn" id="choice-b">
                <span class="choice-label">B</span>
                <span class="choice-text">{{text:Choice2}}</span>
            </button>
            {{/Choice2}}
            
            {{#Choice3}}
            <button class="choice-btn" id="choice-c">
                <span class="choice-label">C</span>
                <span class="choice-text">{{text:Choice3}}</span>
            </button>
            {{/Choice3}}
            
            {{#Choice4}}
            <button class="choice-btn" id="choice-d">
                <span class="choice-label">D</span>
                <span class="choice-text">{{text:Choice4}}</span>
            </button>
            {{/Choice4}}
        </div>
        
        <div class="explanation-text">{{text:Explanation}}</div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Retrieve selected choice and correct answer state
        const selectedChoice = localStorage.getItem('selectedChoice');
        const correctChoice = localStorage.getItem('correctChoice');

        // Apply styles based on stored choice
        if (selectedChoice) {
            const selectedButton = document.getElementById(`choice-${selectedChoice.toLowerCase()}`);
            if (selectedButton) {
                selectedButton.classList.add('selected');
                if (correctChoice === 'true') {
                    selectedButton.classList.add('correct');
                } else {
                    selectedButton.classList.add('incorrect');
                }
            }

            // Highlight the correct answer if user chose incorrectly
            if (correctChoice !== 'true') {
                document.querySelectorAll('.choice-btn').forEach(btn => {
                    if (btn.id && btn.getAttribute('id').includes(`choice-${selectedChoice.toLowerCase()}`)) {
                        btn.classList.add('correct');
                    }
                });
            }
        }
    });
</script>

.quiz-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.quiz-container {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 8px;
    padding: 20px;
}

.badge {
    background-color: #e7f3ff;
    color: #1a73e8;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 16px;
}

.question-text {
    font-size: 16px;
    color: #202124;
    margin-bottom: 24px;
    line-height: 1.5;
}

.choices-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.choice-btn {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    background: white;
    width: 300px;
    text-align: left;
    font-size: 14px;
    color: #202124;
    transition: background-color 0.2s;
    padding-left: 48px;
}

.choice-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 22px;
    background: #f1f3f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #5f6368;
    font-weight: 500;
}

.choice-btn:hover {
    background-color: #f8f9fa;
}

.choice-btn.correct {
    background-color: #e6f4ea;
    border-color: #137333;
}

.choice-btn.correct .choice-label {
    background-color: #137333;
    color: white;
}

.choice-btn.incorrect {
    background-color: #fce8e6;
    border-color: #c5221f;
}

.choice-btn.incorrect .choice-label {
    background-color: #c5221f;
    color: white;
}

.choice-btn.selected {
    border-width: 2px;
}

.explanation-text {
    font-size: 12px;
    color: #757575;
    padding-top: 10px;
    text-align: center;
}

Added changes to explanation and circle (choices)