Import & Consolidate

Upload your generated glossary HTML files. This tool will render the file, extract the generated SVG graphics, terms, definitions, and tags, and package them into a JSON file for Glossary Quest.

1. Select File

📄

Click or Drag HTML file here

Supports .html files

Parsing Logic: The engine uses a hidden iframe to execute the uploaded HTML's Javascript. This guarantees that procedurally generated SVG graphics are successfully captured and mapped to their terms.

2. Preview & Export

0 Cards Found
🔍

Upload a file to see extracted cards here.

Glossary Quest Integration Guide

Glossary Quest needs a small update to accept the SVG-embedded JSON files exported from this tool. Follow these steps to add the Bulk Import feature to your Admin Dashboard.

Step 1: Add the Upload Button

Find the Card Database form in your Glossary Quest HTML file (inside <div id="adminView">). Paste this HTML right above the <div id="adminCardList"> element:

<div class="mt-6 mb-2 border-t border-slate-200 pt-4">
    <label class="block text-xs font-bold text-slate-500 mb-2 uppercase tracking-wider">Bulk Import Cards (JSON)</label>
    <input type="file" id="importJsonFile" accept=".json" class="block w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100 transition-colors">
</div>

Step 2: Add the JavaScript Logic

Scroll down to the <script> section of your Glossary Quest file. Inside the bindEvents() function, paste the following code to make the upload button work and process the SVG icons:

document.getElementById('importJsonFile').addEventListener('change', (e) => {
    const file = e.target.files[0];
    if(!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
        try {
            const data = JSON.parse(event.target.result);
            if(data.gq_format === '1.0' && data.cards) {
                let importedCount = 0;
                data.cards.forEach(c => {
                    // Prevent exact duplicates
                    if(!state.cards.find(existing => existing.term === c.term)) {
                        state.cards.push({
                            id: 'c_' + Date.now() + Math.floor(Math.random()*1000),
                            term: c.term, def: c.def, tag: c.tag, style: c.style, icon: c.icon
                        });
                        importedCount++;
                    }
                });
                saveState();
                renderAdminDashboard();
                alert('Successfully imported ' + importedCount + ' new cards with custom graphics!');
                e.target.value = ''; // Reset input
            } else {
                alert('Invalid Glossary Quest format.');
            }
        } catch(err) { alert('Error reading JSON file.'); }
    };
    reader.readAsText(file);
});