From 3cfa429d12eaf27ca26fb2f020f63bb94e9a622b Mon Sep 17 00:00:00 2001
From: Bastian de Byl <bastian@debyl.io>
Date: Fri, 9 Jan 2026 14:02:39 -0500
Subject: [PATCH] feat: add METAR quiz tool for aviation weather practice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 config.yaml                      |   3 +
 content/tools/_index.md          |  12 +
 content/tools/metar-quiz.md      |  26 ++
 layouts/_default/metar-quiz.html | 627 +++++++++++++++++++++++++++++++
 4 files changed, 668 insertions(+)
 create mode 100644 content/tools/_index.md
 create mode 100644 content/tools/metar-quiz.md
 create mode 100644 layouts/_default/metar-quiz.html

diff --git a/config.yaml b/config.yaml
index b0be191..332cd0f 100644
--- a/config.yaml
+++ b/config.yaml
@@ -64,6 +64,9 @@ languages:
         - name: Archive
           url: archives
           weight: 5
+        - name: Tools
+          url: tools/
+          weight: 7
         - name: Search
           url: search/
           weight: 10
diff --git a/content/tools/_index.md b/content/tools/_index.md
new file mode 100644
index 0000000..97ac907
--- /dev/null
+++ b/content/tools/_index.md
@@ -0,0 +1,12 @@
+---
+title: "Tools"
+description: "Aviation and other useful tools"
+summary: "Aviation and other useful tools"
+_build:
+  list: never
+  render: always
+---
+
+## Aviation
+
+- [METAR Quiz](/tools/metar-quiz/) - Test your knowledge of METAR and TAF weather abbreviations
diff --git a/content/tools/metar-quiz.md b/content/tools/metar-quiz.md
new file mode 100644
index 0000000..411dabd
--- /dev/null
+++ b/content/tools/metar-quiz.md
@@ -0,0 +1,26 @@
+---
+title: "METAR Quiz - Aviation Weather Abbreviation Practice"
+layout: "metar-quiz"
+description: "Free interactive quiz to learn and practice METAR and TAF weather abbreviations. Test your knowledge of aviation weather codes including precipitation, sky conditions, visibility, and more."
+summary: "Practice METAR and TAF weather abbreviations"
+keywords:
+  - METAR quiz
+  - TAF quiz
+  - aviation weather
+  - weather abbreviations
+  - pilot training
+  - aviation weather codes
+  - METAR practice
+  - METAR test
+  - learn METAR
+  - aviation study
+tags:
+  - aviation
+  - weather
+  - tools
+date: 2025-01-06
+lastmod: 2025-01-06
+_build:
+  list: never
+  render: always
+---
diff --git a/layouts/_default/metar-quiz.html b/layouts/_default/metar-quiz.html
new file mode 100644
index 0000000..b64aab6
--- /dev/null
+++ b/layouts/_default/metar-quiz.html
@@ -0,0 +1,627 @@
+{{- define "main" }}
+
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebApplication",
+  "name": "METAR Quiz",
+  "description": "{{ .Description }}",
+  "url": "{{ .Permalink }}",
+  "applicationCategory": "EducationalApplication",
+  "operatingSystem": "Any",
+  "offers": {
+    "@type": "Offer",
+    "price": "0",
+    "priceCurrency": "USD"
+  },
+  "author": {
+    "@type": "Person",
+    "name": "{{ .Site.Params.author }}"
+  }
+}
+</script>
+
+<style>
+.quiz-container {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.quiz-header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.quiz-controls {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 1.5rem;
+}
+
+.quiz-controls select {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+    background: var(--code-bg);
+    color: var(--primary);
+    cursor: pointer;
+}
+
+.quiz-controls select:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.start-btn, .submit-btn, .next-btn, .retake-btn, .stop-btn {
+    padding: 0.75rem 2rem;
+    font-size: 1.1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background: var(--primary);
+    color: var(--theme);
+    font-weight: 600;
+    transition: opacity 0.2s;
+}
+
+.start-btn:hover, .submit-btn:hover, .next-btn:hover, .retake-btn:hover, .stop-btn:hover {
+    opacity: 0.85;
+}
+
+.stop-btn {
+    background: #666;
+}
+
+.quiz-area {
+    display: none;
+    text-align: center;
+}
+
+.quiz-area.active {
+    display: block;
+}
+
+.question-prompt {
+    font-size: 1.1rem;
+    color: var(--secondary);
+    margin-bottom: 0.5rem;
+}
+
+.question-text {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: var(--primary);
+    padding: 1rem;
+    background: var(--code-bg);
+    border-radius: 8px;
+    min-height: 3rem;
+}
+
+.answer-input {
+    padding: 0.75rem 1rem;
+    font-size: 1.2rem;
+    border: 2px solid var(--border);
+    border-radius: 4px;
+    background: var(--code-bg);
+    color: var(--primary);
+    width: 200px;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.answer-input:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.input-row {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.progress-text {
+    font-size: 1rem;
+    color: var(--secondary);
+    margin-top: 1rem;
+}
+
+.feedback {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 1rem 0;
+    padding: 1rem;
+    border-radius: 4px;
+    display: none;
+}
+
+.feedback.correct {
+    display: block;
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+}
+
+.feedback.incorrect {
+    display: block;
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+.results-area {
+    display: none;
+    text-align: center;
+}
+
+.results-area.active {
+    display: block;
+}
+
+.score-display {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--primary);
+}
+
+.score-subtitle {
+    font-size: 1.2rem;
+    color: var(--secondary);
+    margin-bottom: 2rem;
+}
+
+.results-breakdown {
+    text-align: left;
+    max-height: 400px;
+    overflow-y: auto;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+}
+
+.result-item {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
+.result-item:last-child {
+    border-bottom: none;
+}
+
+.result-item.correct {
+    background: rgba(34, 197, 94, 0.08);
+}
+
+.result-item.incorrect {
+    background: rgba(239, 68, 68, 0.08);
+}
+
+.result-question {
+    flex: 1;
+}
+
+.result-answers {
+    font-family: monospace;
+    font-size: 0.95rem;
+}
+
+.result-your-answer {
+    color: var(--secondary);
+}
+
+.result-correct-answer {
+    color: #22c55e;
+    font-weight: 600;
+}
+
+.result-icon {
+    font-size: 1.2rem;
+}
+
+.shuffle-stats {
+    font-size: 1.1rem;
+    color: var(--secondary);
+    margin-bottom: 1rem;
+}
+
+.shuffle-stats .correct-count {
+    color: #22c55e;
+    font-weight: 600;
+}
+
+.shuffle-stats .incorrect-count {
+    color: #ef4444;
+    font-weight: 600;
+}
+
+.setup-area {
+    text-align: center;
+}
+
+.button-row {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-top: 1rem;
+}
+</style>
+
+<article class="quiz-container">
+    <header class="quiz-header">
+        <h1>METAR Quiz</h1>
+        <p class="post-description">Practice aviation weather abbreviations for METAR and TAF reports</p>
+    </header>
+
+    <div id="setup" class="setup-area">
+        <div class="quiz-controls">
+            <select id="modeSelect">
+                <option value="quiz">Quiz Mode</option>
+                <option value="shuffle">Shuffle Mode</option>
+            </select>
+            <select id="difficultySelect">
+                <option value="normal">Weather Only</option>
+                <option value="taf">Weather + TAF</option>
+                <option value="hard">All (Hard)</option>
+            </select>
+        </div>
+        <button class="start-btn" onclick="startQuiz()">Start</button>
+    </div>
+
+    <div id="quizArea" class="quiz-area">
+        <p class="question-prompt">What is the abbreviation for:</p>
+        <div id="questionText" class="question-text"></div>
+
+        <div class="input-row">
+            <input type="text" id="answerInput" class="answer-input" placeholder="Enter code" autocomplete="off" maxlength="10">
+            <button class="submit-btn" onclick="submitAnswer()">Submit</button>
+        </div>
+
+        <div id="feedback" class="feedback"></div>
+
+        <p id="progressText" class="progress-text"></p>
+        <div id="shuffleStats" class="shuffle-stats" style="display: none;">
+            Correct: <span class="correct-count" id="correctCount">0</span> |
+            Wrong: <span class="incorrect-count" id="wrongCount">0</span>
+        </div>
+
+        <div class="button-row" id="stopRow" style="display: none;">
+            <button class="stop-btn" onclick="stopShuffle()">Stop</button>
+        </div>
+    </div>
+
+    <div id="resultsArea" class="results-area">
+        <div id="scoreDisplay" class="score-display"></div>
+        <p id="scoreSubtitle" class="score-subtitle"></p>
+        <div id="resultsBreakdown" class="results-breakdown"></div>
+        <button class="retake-btn" onclick="retakeQuiz()">Retake Quiz</button>
+    </div>
+</article>
+
+<script>
+(function() {
+    // METAR Data
+    const PRECIPITATION = [
+        { abbr: "RA", desc: "Rain" },
+        { abbr: "SN", desc: "Snow" },
+        { abbr: "DZ", desc: "Drizzle" },
+        { abbr: "GR", desc: "Hail" },
+        { abbr: "GS", desc: "Small Hail/Snow Pellets" },
+        { abbr: "PL", desc: "Ice Pellets" },
+        { abbr: "SG", desc: "Snow Grains" },
+        { abbr: "IC", desc: "Ice Crystals" },
+        { abbr: "UP", desc: "Unknown Precipitation" }
+    ];
+
+    const DESCRIPTORS = [
+        { abbr: "TS", desc: "Thunderstorm" },
+        { abbr: "SH", desc: "Showers" },
+        { abbr: "FZ", desc: "Freezing" },
+        { abbr: "BL", desc: "Blowing" },
+        { abbr: "DR", desc: "Drifting" },
+        { abbr: "MI", desc: "Shallow" },
+        { abbr: "BC", desc: "Patches" },
+        { abbr: "PR", desc: "Partial" }
+    ];
+
+    const OBSCURATIONS = [
+        { abbr: "FG", desc: "Fog" },
+        { abbr: "BR", desc: "Mist" },
+        { abbr: "HZ", desc: "Haze" },
+        { abbr: "FU", desc: "Smoke" },
+        { abbr: "DU", desc: "Widespread Dust" },
+        { abbr: "SA", desc: "Sand" },
+        { abbr: "VA", desc: "Volcanic Ash" },
+        { abbr: "PY", desc: "Spray" }
+    ];
+
+    const SKY_CONDITIONS = [
+        { abbr: "SKC", desc: "Sky Clear" },
+        { abbr: "CLR", desc: "Clear (automated)" },
+        { abbr: "FEW", desc: "Few (1-2 oktas)" },
+        { abbr: "SCT", desc: "Scattered (3-4 oktas)" },
+        { abbr: "BKN", desc: "Broken (5-7 oktas)" },
+        { abbr: "OVC", desc: "Overcast (8 oktas)" },
+        { abbr: "VV", desc: "Vertical Visibility" },
+        { abbr: "CB", desc: "Cumulonimbus" },
+        { abbr: "TCU", desc: "Towering Cumulus" }
+    ];
+
+    const OTHER_WEATHER = [
+        { abbr: "VC", desc: "Vicinity" },
+        { abbr: "FC", desc: "Funnel Cloud" },
+        { abbr: "+FC", desc: "Tornado/Waterspout" },
+        { abbr: "PO", desc: "Dust/Sand Whirls" },
+        { abbr: "SQ", desc: "Squall" },
+        { abbr: "SS", desc: "Sandstorm" },
+        { abbr: "DS", desc: "Dust Storm" }
+    ];
+
+    const TAF_CODES = [
+        { abbr: "BECMG", desc: "Becoming" },
+        { abbr: "TEMPO", desc: "Temporary" },
+        { abbr: "PROB30", desc: "30% Probability" },
+        { abbr: "PROB40", desc: "40% Probability" },
+        { abbr: "FM", desc: "From (time)" },
+        { abbr: "NSW", desc: "No Significant Weather" },
+        { abbr: "CAVOK", desc: "Ceiling and Visibility OK" }
+    ];
+
+    const NON_WEATHER = [
+        { abbr: "FMH-1", desc: "Federal Meteorological Handbook No. 1" },
+        { abbr: "FMH2", desc: "Federal Meteorological Handbook No. 2" },
+        { abbr: "FIBI", desc: "Filed But Impracticable to Transmit" },
+        { abbr: "METAR", desc: "Meteorological Aerodrome Report" },
+        { abbr: "SPECI", desc: "Special (unscheduled observation)" },
+        { abbr: "AUTO", desc: "Automated observation" },
+        { abbr: "COR", desc: "Correction" },
+        { abbr: "RMK", desc: "Remarks" },
+        { abbr: "AO1", desc: "Automated without precipitation sensor" },
+        { abbr: "AO2", desc: "Automated with precipitation sensor" },
+        { abbr: "SLP", desc: "Sea Level Pressure" },
+        { abbr: "NOSIG", desc: "No Significant Change" }
+    ];
+
+    // State
+    let mode = 'quiz';
+    let difficulty = 'normal';
+    let questions = [];
+    let currentIndex = 0;
+    let answers = [];
+    let correctCount = 0;
+    let incorrectCount = 0;
+    let waitingForNext = false;
+
+    // DOM Elements
+    const setup = document.getElementById('setup');
+    const quizArea = document.getElementById('quizArea');
+    const resultsArea = document.getElementById('resultsArea');
+    const questionText = document.getElementById('questionText');
+    const answerInput = document.getElementById('answerInput');
+    const feedback = document.getElementById('feedback');
+    const progressText = document.getElementById('progressText');
+    const shuffleStats = document.getElementById('shuffleStats');
+    const stopRow = document.getElementById('stopRow');
+    const correctCountEl = document.getElementById('correctCount');
+    const wrongCountEl = document.getElementById('wrongCount');
+    const scoreDisplay = document.getElementById('scoreDisplay');
+    const scoreSubtitle = document.getElementById('scoreSubtitle');
+    const resultsBreakdown = document.getElementById('resultsBreakdown');
+    const modeSelect = document.getElementById('modeSelect');
+    const difficultySelect = document.getElementById('difficultySelect');
+
+    // Fisher-Yates shuffle
+    function shuffle(array) {
+        const arr = [...array];
+        for (let i = arr.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [arr[i], arr[j]] = [arr[j], arr[i]];
+        }
+        return arr;
+    }
+
+    // Build questions with intensity variants for precipitation
+    function buildQuestions() {
+        let items = [];
+
+        // Add precipitation with intensity variants
+        PRECIPITATION.forEach(p => {
+            // Random intensity: 0 = light, 1 = moderate, 2 = heavy
+            const intensity = Math.floor(Math.random() * 3);
+            if (intensity === 0) {
+                items.push({ abbr: "-" + p.abbr, desc: "Light " + p.desc });
+            } else if (intensity === 2) {
+                items.push({ abbr: "+" + p.abbr, desc: "Heavy " + p.desc });
+            } else {
+                items.push(p);
+            }
+        });
+
+        // Add other weather categories (actual weather phenomena)
+        items = items.concat(DESCRIPTORS, OBSCURATIONS, SKY_CONDITIONS, OTHER_WEATHER);
+
+        // Add TAF format codes for taf and hard modes
+        if (difficulty === 'taf' || difficulty === 'hard') {
+            items = items.concat(TAF_CODES);
+        }
+
+        // Add non-weather codes for hard mode only
+        if (difficulty === 'hard') {
+            items = items.concat(NON_WEATHER);
+        }
+
+        return shuffle(items);
+    }
+
+    // Start quiz
+    window.startQuiz = function() {
+        mode = modeSelect.value;
+        difficulty = difficultySelect.value;
+        questions = buildQuestions();
+        currentIndex = 0;
+        answers = [];
+        correctCount = 0;
+        incorrectCount = 0;
+        waitingForNext = false;
+
+        setup.style.display = 'none';
+        resultsArea.classList.remove('active');
+        quizArea.classList.add('active');
+
+        if (mode === 'shuffle') {
+            shuffleStats.style.display = 'block';
+            stopRow.style.display = 'flex';
+            progressText.style.display = 'none';
+        } else {
+            shuffleStats.style.display = 'none';
+            stopRow.style.display = 'none';
+            progressText.style.display = 'block';
+        }
+
+        showQuestion();
+    };
+
+    // Show current question
+    function showQuestion() {
+        if (mode === 'quiz' && currentIndex >= questions.length) {
+            showResults();
+            return;
+        }
+
+        // For shuffle mode, loop back
+        if (mode === 'shuffle' && currentIndex >= questions.length) {
+            questions = buildQuestions();
+            currentIndex = 0;
+        }
+
+        const q = questions[currentIndex];
+        questionText.textContent = q.desc;
+        answerInput.value = '';
+        answerInput.focus();
+        feedback.className = 'feedback';
+        feedback.style.display = 'none';
+        waitingForNext = false;
+
+        if (mode === 'quiz') {
+            progressText.textContent = `Question ${currentIndex + 1} of ${questions.length}`;
+        }
+
+        correctCountEl.textContent = correctCount;
+        wrongCountEl.textContent = incorrectCount;
+    }
+
+    // Submit answer
+    window.submitAnswer = function() {
+        if (waitingForNext) return;
+
+        const userAnswer = answerInput.value.trim().toUpperCase();
+        if (!userAnswer) return;
+
+        // Prevent double-submit in shuffle mode
+        if (mode === 'shuffle') {
+            waitingForNext = true;
+        }
+
+        const q = questions[currentIndex];
+        const correctAnswer = q.abbr.toUpperCase();
+        const isCorrect = userAnswer === correctAnswer;
+
+        if (mode === 'quiz') {
+            answers.push({
+                question: q.desc,
+                userAnswer: userAnswer,
+                correctAnswer: q.abbr,
+                isCorrect: isCorrect
+            });
+            currentIndex++;
+
+            if (currentIndex >= questions.length) {
+                showResults();
+            } else {
+                showQuestion();
+            }
+        } else {
+            // Shuffle mode - show feedback and auto-advance
+            if (isCorrect) {
+                correctCount++;
+                feedback.textContent = 'Correct!';
+                feedback.className = 'feedback correct';
+            } else {
+                incorrectCount++;
+                feedback.textContent = `Incorrect. The answer is: ${q.abbr}`;
+                feedback.className = 'feedback incorrect';
+            }
+            feedback.style.display = 'block';
+
+            correctCountEl.textContent = correctCount;
+            wrongCountEl.textContent = incorrectCount;
+
+            // Auto-advance after showing feedback
+            currentIndex++;
+            setTimeout(() => {
+                showQuestion();
+            }, isCorrect ? 800 : 1500);
+        }
+    };
+
+    // Stop shuffle
+    window.stopShuffle = function() {
+        quizArea.classList.remove('active');
+        setup.style.display = 'block';
+    };
+
+    // Show results (quiz mode)
+    function showResults() {
+        quizArea.classList.remove('active');
+        resultsArea.classList.add('active');
+
+        const correct = answers.filter(a => a.isCorrect).length;
+        const total = answers.length;
+        const percentage = Math.round((correct / total) * 100);
+
+        scoreDisplay.textContent = `${percentage}%`;
+        scoreSubtitle.textContent = `${correct} out of ${total} correct`;
+
+        let html = '';
+        answers.forEach(a => {
+            const statusClass = a.isCorrect ? 'correct' : 'incorrect';
+            const icon = a.isCorrect ? '&#10003;' : '&#10007;';
+            html += `
+                <div class="result-item ${statusClass}">
+                    <span class="result-question">${a.question}</span>
+                    <span class="result-answers">
+                        <span class="result-your-answer">${a.userAnswer}</span>
+                        ${!a.isCorrect ? ` → <span class="result-correct-answer">${a.correctAnswer}</span>` : ''}
+                    </span>
+                    <span class="result-icon">${icon}</span>
+                </div>
+            `;
+        });
+        resultsBreakdown.innerHTML = html;
+    }
+
+    // Retake quiz
+    window.retakeQuiz = function() {
+        resultsArea.classList.remove('active');
+        setup.style.display = 'block';
+    };
+
+    // Enter key to submit
+    answerInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            submitAnswer();
+        }
+    });
+})();
+</script>
+
+{{- end }}{{/* end main */}}