{"id":139,"date":"2026-05-30T02:52:07","date_gmt":"2026-05-30T02:52:07","guid":{"rendered":"https:\/\/toolibee.com\/?page_id=139"},"modified":"2026-06-17T03:38:04","modified_gmt":"2026-06-17T03:38:04","slug":"flashcard-generator-2","status":"publish","type":"page","link":"https:\/\/toolibee.com\/?page_id=139","title":{"rendered":"Build Flashcards"},"content":{"rendered":"\n<div class=\"toolibee-page-menu\">\n  <a class=\"toolibee-page-logo\" href=\"\/toolibee\/\">\n    <img decoding=\"async\" src=\"https:\/\/toolibee.com\/wp-content\/uploads\/2026\/02\/toolibee-logo.png\" alt=\"Toolibee\">\n  <\/a>\n\n  <div class=\"toolibee-page-links\">\n    <a href=\"\/toolibee\/\">Home<\/a>\n    <a href=\"\/tools\/\">Tools<\/a>\n    <a href=\"\/my-account\/\">Login<\/a>\n  <\/div>\n<\/div>\n\n<div class=\"toolibee-back-tools\">\n  <a href=\"\/tools\/\">\u2190 Back to All Tools<\/a>\n<\/div>\n\n<style>\n.toolibee-page-menu {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 1050px;\n  margin: 0 auto 10px;\n  padding: 12px 18px;\n  border-bottom: 1px solid #e6eef0;\n}\n\n.toolibee-page-logo img {\n  height: 48px;\n  width: auto;\n  display: block;\n}\n\n.toolibee-page-links {\n  display: flex;\n  gap: 22px;\n}\n\n.toolibee-page-links a,\n.toolibee-back-tools a {\n  color: #00587C;\n  font-weight: 700;\n  text-decoration: none;\n}\n\n.toolibee-page-links a:hover,\n.toolibee-back-tools a:hover {\n  text-decoration: underline;\n}\n\n.toolibee-back-tools {\n  max-width: 1050px;\n  margin: 0 auto 18px;\n  padding: 0 18px;\n}\n\n@media (max-width: 600px) {\n  .toolibee-page-menu {\n    padding: 10px 14px;\n  }\n\n  .toolibee-page-logo img {\n    height: 38px;\n  }\n\n  .toolibee-page-links {\n    gap: 14px;\n    font-size: 14px;\n  }\n}\n<\/style>\n\n\n\n    <div id=\"toolibee-manual-flashcards-6254\" class=\"toolibee-tool\" data-logged-in=\"no\">\n        <div class=\"toolibee-card\">\n            <div class=\"toolibee-head\">\n                <div class=\"toolibee-bee\">\ud83d\udc1d<\/div>\n                <div>\n                    <h2>Flashcard Maker<\/h2>\n                    <p>Create your own study decks and save them for later.<\/p>\n                <\/div>\n            <\/div>\n\n            <div class=\"toolibee-body\">\n                <div class=\"tb-login-note\"><\/div>\n\n                <label class=\"toolibee-label\">Deck Name<\/label>\n                <input type=\"text\" class=\"toolibee-input tb-deck-name\" placeholder=\"Example: Biology Chapter 1\">\n\n                <div class=\"toolibee-grid\">\n                    <div>\n                        <label class=\"toolibee-label\">Question<\/label>\n                        <textarea class=\"toolibee-textarea small tb-question\" placeholder=\"Enter the question...\"><\/textarea>\n                    <\/div>\n                    <div>\n                        <label class=\"toolibee-label\">Answer<\/label>\n                        <textarea class=\"toolibee-textarea small tb-answer-input\" placeholder=\"Enter the answer...\"><\/textarea>\n                    <\/div>\n                <\/div>\n\n                <div class=\"toolibee-buttonrow\">\n                    <button type=\"button\" class=\"toolibee-btn tb-add-card\">Add Card<\/button>\n                    <button type=\"button\" class=\"toolibee-btn secondary tb-save-deck\">Save Deck<\/button>\n                    <button type=\"button\" class=\"toolibee-btn secondary tb-copy-deck\">Copy Deck<\/button>\n                    <button type=\"button\" class=\"toolibee-btn secondary tb-clear-current\">Clear Current<\/button>\n                <\/div>\n\n                <h3 class=\"tb-section-title\">Current Deck<\/h3>\n                <div class=\"tb-current-cards\">No cards added yet.<\/div>\n\n                <h3 class=\"tb-section-title\">Study Mode<\/h3>\n                <div class=\"tb-study-panel\">\n                    <div class=\"tb-study-progress\">No cards to study yet.<\/div>\n                    <div class=\"tb-study-card\">\n                        <div class=\"tb-study-question\">Add cards to begin studying.<\/div>\n                        <div class=\"tb-study-answer\"><\/div>\n                    <\/div>\n                    <div class=\"toolibee-buttonrow\">\n                        <button type=\"button\" class=\"toolibee-btn tb-show-answer\">Show Answer<\/button>\n                        <button type=\"button\" class=\"toolibee-btn secondary tb-prev-card\">Previous<\/button>\n                        <button type=\"button\" class=\"toolibee-btn secondary tb-next-card\">Next<\/button>\n                        <button type=\"button\" class=\"toolibee-btn secondary tb-shuffle\">Shuffle<\/button>\n                    <\/div>\n                <\/div>\n\n                <h3 class=\"tb-section-title\">Saved Decks<\/h3>\n                <div class=\"tb-saved-decks\">Loading saved decks...<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .toolibee-tool{font-family:Inter,Arial,sans-serif;color:#1f2937;max-width:1000px;margin:24px auto;padding:0 14px}\n        .toolibee-card{background:#fff;border:1px solid #dbe7f3;border-radius:22px;box-shadow:0 14px 35px rgba(24,50,74,.10);overflow:hidden}\n        .toolibee-head{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#18324a,#24577c);color:#fff;padding:22px 24px}\n        .toolibee-bee{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#f6b93b;color:#1f2937;font-size:25px;flex:0 0 auto}\n        .toolibee-head h2{margin:0;font-size:25px}\n        .toolibee-head p{margin:5px 0 0;color:#e8f5ff}\n        .toolibee-body{padding:24px}\n        .toolibee-label{display:block;font-weight:800;margin:0 0 7px;color:#18324a}\n        .toolibee-input,.toolibee-textarea{width:100%;box-sizing:border-box;border:1px solid #dbe7f3;border-radius:14px;padding:12px 13px;font-size:15px;background:#fff;color:#1f2937}\n        .toolibee-textarea{min-height:130px;resize:vertical}\n        .toolibee-textarea.small{min-height:110px}\n        .toolibee-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}\n        .toolibee-buttonrow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}\n        .toolibee-btn{border:0;border-radius:999px;padding:11px 18px;font-weight:800;cursor:pointer;background:#2f80ed;color:#fff}\n        .toolibee-btn.secondary{background:#fff;color:#18324a;border:1px solid #dbe7f3}\n        .toolibee-btn.danger{background:#fff;color:#b42318;border:1px solid #f3b4ae}\n        .tb-section-title{color:#18324a;margin:26px 0 12px;font-size:20px}\n        .tb-login-note{margin-bottom:14px;font-weight:700;color:#18324a}\n        .tb-current-cards,.tb-saved-decks,.tb-study-panel{background:#eaf6ff;border:1px solid #dbe7f3;border-radius:16px;padding:16px}\n        .tb-card-item,.tb-deck-item{background:#fff;border:1px solid #dbe7f3;border-radius:16px;padding:14px;margin-bottom:12px}\n        .tb-card-q{font-weight:800;color:#18324a;margin-bottom:7px}\n        .tb-card-a{margin-bottom:10px;line-height:1.5}\n        .tb-card-actions{display:flex;gap:8px;flex-wrap:wrap}\n        .tb-mini-btn{border:1px solid #dbe7f3;background:#fff;border-radius:999px;padding:7px 11px;font-weight:800;cursor:pointer;color:#18324a}\n        .tb-mini-btn.danger{color:#b42318;border-color:#f3b4ae}\n        .tb-deck-title{font-weight:900;color:#18324a;font-size:17px;margin-bottom:6px}\n        .tb-deck-meta{font-size:13px;color:#64748b;margin-bottom:10px}\n        .tb-study-card{background:#fff;border:1px solid #dbe7f3;border-radius:18px;padding:22px;margin-top:12px;min-height:120px}\n        .tb-study-progress{font-weight:800;color:#18324a}\n        .tb-study-question{font-size:20px;line-height:1.45;font-weight:800;color:#18324a}\n        .tb-study-answer{display:none;margin-top:16px;background:#fffdf6;border:1px solid #f2dfac;border-radius:14px;padding:14px;line-height:1.55}\n        .tb-study-answer.open{display:block}\n        @media(max-width:760px){.toolibee-grid{grid-template-columns:1fr}.toolibee-head{align-items:flex-start}}\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function () {\n        const root = document.getElementById('toolibee-manual-flashcards-6254');\n        if (!root) return;\n\n        const ajaxUrl = 'https:\/\/toolibee.com\/wp-admin\/admin-ajax.php';\n        const nonce = '689dadbdc3';\n        const loggedIn = root.dataset.loggedIn === 'yes';\n        const get = s => root.querySelector(s);\n\n        let cards = [];\n        let savedDecks = [];\n        let studyIndex = 0;\n\n        const deckName = get('.tb-deck-name');\n        const question = get('.tb-question');\n        const answer = get('.tb-answer-input');\n        const currentCards = get('.tb-current-cards');\n        const savedDecksBox = get('.tb-saved-decks');\n        const loginNote = get('.tb-login-note');\n        const studyProgress = get('.tb-study-progress');\n        const studyQuestion = get('.tb-study-question');\n        const studyAnswer = get('.tb-study-answer');\n\n        loginNote.textContent = loggedIn\n            ? 'You are logged in. Your saved decks will be available when you return.'\n            : 'You can create cards now, but you must log in to save decks for later.';\n\n        function escapeHTML(text) {\n            const div = document.createElement('div');\n            div.textContent = text || '';\n            return div.innerHTML;\n        }\n\n        function ajax(action, data = {}) {\n            const formData = new FormData();\n            formData.append('action', action);\n            formData.append('nonce', nonce);\n\n            Object.keys(data).forEach(key => {\n                formData.append(key, data[key]);\n            });\n\n            return fetch(ajaxUrl, {\n                method: 'POST',\n                credentials: 'same-origin',\n                body: formData\n            }).then(r => r.json());\n        }\n\n        function renderCurrentCards() {\n            if (!cards.length) {\n                currentCards.textContent = 'No cards added yet.';\n                updateStudy();\n                return;\n            }\n\n            currentCards.innerHTML = '';\n\n            cards.forEach((card, index) => {\n                const div = document.createElement('div');\n                div.className = 'tb-card-item';\n                div.innerHTML =\n                    '<div class=\"tb-card-q\">Q: ' + escapeHTML(card.q) + '<\/div>' +\n                    '<div class=\"tb-card-a\">A: ' + escapeHTML(card.a) + '<\/div>' +\n                    '<div class=\"tb-card-actions\">' +\n                        '<button type=\"button\" class=\"tb-mini-btn tb-edit\">Edit<\/button>' +\n                        '<button type=\"button\" class=\"tb-mini-btn danger tb-delete\">Delete<\/button>' +\n                    '<\/div>';\n\n                div.querySelector('.tb-edit').addEventListener('click', function () {\n                    question.value = card.q;\n                    answer.value = card.a;\n                    cards.splice(index, 1);\n                    renderCurrentCards();\n                });\n\n                div.querySelector('.tb-delete').addEventListener('click', function () {\n                    cards.splice(index, 1);\n                    if (studyIndex >= cards.length) studyIndex = Math.max(0, cards.length - 1);\n                    renderCurrentCards();\n                });\n\n                currentCards.appendChild(div);\n            });\n\n            updateStudy();\n        }\n\n        function updateStudy() {\n            studyAnswer.classList.remove('open');\n            studyAnswer.textContent = '';\n\n            if (!cards.length) {\n                studyProgress.textContent = 'No cards to study yet.';\n                studyQuestion.textContent = 'Add cards to begin studying.';\n                return;\n            }\n\n            if (studyIndex < 0) studyIndex = 0;\n            if (studyIndex >= cards.length) studyIndex = cards.length - 1;\n\n            studyProgress.textContent = 'Card ' + (studyIndex + 1) + ' of ' + cards.length;\n            studyQuestion.textContent = cards[studyIndex].q;\n            studyAnswer.textContent = cards[studyIndex].a;\n        }\n\n        function renderSavedDecks() {\n            if (!loggedIn) {\n                savedDecksBox.textContent = 'Log in to save and reload decks.';\n                return;\n            }\n\n            if (!savedDecks.length) {\n                savedDecksBox.textContent = 'No saved decks yet.';\n                return;\n            }\n\n            savedDecksBox.innerHTML = '';\n\n            savedDecks.forEach((deck, index) => {\n                const div = document.createElement('div');\n                div.className = 'tb-deck-item';\n                div.innerHTML =\n                    '<div class=\"tb-deck-title\">' + escapeHTML(deck.name) + '<\/div>' +\n                    '<div class=\"tb-deck-meta\">' + deck.cards.length + ' cards<\/div>' +\n                    '<div class=\"tb-card-actions\">' +\n                        '<button type=\"button\" class=\"tb-mini-btn tb-load\">Load<\/button>' +\n                        '<button type=\"button\" class=\"tb-mini-btn danger tb-remove\">Delete<\/button>' +\n                    '<\/div>';\n\n                div.querySelector('.tb-load').addEventListener('click', function () {\n                    deckName.value = deck.name;\n                    cards = JSON.parse(JSON.stringify(deck.cards));\n                    studyIndex = 0;\n                    renderCurrentCards();\n                });\n\n                div.querySelector('.tb-remove').addEventListener('click', function () {\n                    if (!confirm('Delete this saved deck?')) return;\n                    savedDecks.splice(index, 1);\n                    saveAllDecks();\n                });\n\n                savedDecksBox.appendChild(div);\n            });\n        }\n\n        function loadDecks() {\n            if (!loggedIn) {\n                renderSavedDecks();\n                return;\n            }\n\n            ajax('toolibee_manual_flashcards_load')\n                .then(data => {\n                    if (data.success) {\n                        savedDecks = data.data.decks || [];\n                    }\n                    renderSavedDecks();\n                })\n                .catch(() => {\n                    savedDecksBox.textContent = 'Could not load saved decks.';\n                });\n        }\n\n        function saveAllDecks() {\n            ajax('toolibee_manual_flashcards_save_all', {\n                decks: JSON.stringify(savedDecks)\n            }).then(data => {\n                if (!data.success) {\n                    alert(data.data || 'Could not save decks.');\n                }\n                renderSavedDecks();\n            });\n        }\n\n        get('.tb-add-card').addEventListener('click', function () {\n            const q = question.value.trim();\n            const a = answer.value.trim();\n\n            if (!q || !a) {\n                alert('Add both a question and an answer.');\n                return;\n            }\n\n            cards.push({ q, a });\n            question.value = '';\n            answer.value = '';\n            renderCurrentCards();\n        });\n\n        get('.tb-save-deck').addEventListener('click', function () {\n            if (!loggedIn) {\n                alert('Please log in to save decks.');\n                return;\n            }\n\n            const name = deckName.value.trim();\n\n            if (!name) {\n                alert('Give your deck a name first.');\n                return;\n            }\n\n            if (!cards.length) {\n                alert('Add at least one card before saving.');\n                return;\n            }\n\n            const deck = {\n                name: name,\n                cards: cards,\n                updated: new Date().toISOString()\n            };\n\n            const existing = savedDecks.findIndex(d => d.name.toLowerCase() === name.toLowerCase());\n\n            if (existing >= 0) {\n                savedDecks[existing] = deck;\n            } else {\n                savedDecks.push(deck);\n            }\n\n            saveAllDecks();\n            alert('Deck saved.');\n        });\n\n        get('.tb-copy-deck').addEventListener('click', function () {\n            if (!cards.length) return;\n\n            const text = cards.map((c, i) =>\n                'Card ' + (i + 1) + '\\nQ: ' + c.q + '\\nA: ' + c.a\n            ).join('\\n\\n');\n\n            navigator.clipboard.writeText(text);\n            alert('Deck copied.');\n        });\n\n        get('.tb-clear-current').addEventListener('click', function () {\n            if (!confirm('Clear the current deck on screen?')) return;\n            deckName.value = '';\n            question.value = '';\n            answer.value = '';\n            cards = [];\n            studyIndex = 0;\n            renderCurrentCards();\n        });\n\n        get('.tb-show-answer').addEventListener('click', function () {\n            if (!cards.length) return;\n            studyAnswer.classList.toggle('open');\n            this.textContent = studyAnswer.classList.contains('open') ? 'Hide Answer' : 'Show Answer';\n        });\n\n        get('.tb-next-card').addEventListener('click', function () {\n            if (!cards.length) return;\n            studyIndex = (studyIndex + 1) % cards.length;\n            get('.tb-show-answer').textContent = 'Show Answer';\n            updateStudy();\n        });\n\n        get('.tb-prev-card').addEventListener('click', function () {\n            if (!cards.length) return;\n            studyIndex = (studyIndex - 1 + cards.length) % cards.length;\n            get('.tb-show-answer').textContent = 'Show Answer';\n            updateStudy();\n        });\n\n        get('.tb-shuffle').addEventListener('click', function () {\n            if (!cards.length) return;\n\n            for (let i = cards.length - 1; i > 0; i--) {\n                const j = Math.floor(Math.random() * (i + 1));\n                [cards[i], cards[j]] = [cards[j], cards[i]];\n            }\n\n            studyIndex = 0;\n            get('.tb-show-answer').textContent = 'Show Answer';\n            renderCurrentCards();\n        });\n\n        renderCurrentCards();\n        loadDecks();\n    });\n    <\/script>\n\n    \n","protected":false},"excerpt":{"rendered":"<p>Home Tools Login \u2190 Back to All Tools<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toolibee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=139"}],"version-history":[{"count":4,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/toolibee.com\/index.php?rest_route=\/wp\/v2\/pages\/139\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/toolibee.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}