${formData.subject} - ${formData.topic}

Doelgroep: ${formData.targetGroup}

${questions.map((q, i)=>`

${i + 1}. ${q.split("\n").join("
")}

`).join("")}

Antwoordsleutel

${answers.map((a, i)=>`

${i + 1}. ${a.split(".")[1]}

`).join("")}

Antwoordsleutel met uitleg

${explanations.map((e, i)=>`

${e}

`).join("")}

`; try { const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ html: htmlContent }) }); if (!response.ok) { throw new Error("PDF generation failed"); } const blob = await response.blob(); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${formData.subject}_${formData.topic}_toets.pdf`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } catch (error) { console.error("Error generating PDF:", error); alert("Er ging iets mis bij het genereren van de PDF. Probeer het opnieuw."); } }; const handleSubmit = async ()=>{ setIsLoading(true); const prompt = `Maak ${formData.questionCount} meerkeuzevragen voor het vak ${formData.subject} over het onderwerp ${formData.topic}. De doelgroep is ${formData.targetGroup}. Aanvullende opmerkingen: ${formData.additionalNotes} Geef de vragen in dit format (zonder sterretjes en zonder het woord 'Vraag'): 1. [vraag] A. [antwoord] B. [antwoord] C. [antwoord] D. [antwoord] Geef daarna de antwoordsleutel in dit format (zonder sterretjes): 1. B 2. A 3. C etc. Geef daarna de antwoordsleutel met uitleg in dit format (zonder sterretjes): 1. B - [uitleg waarom dit het juiste antwoord is] 2. A - [uitleg waarom dit het juiste antwoord is] 3. C - [uitleg waarom dit het juiste antwoord is] etc.`; try { const response = await fetch("/integrations/google-gemini-1-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ] }) }); const data = await response.json(); console.log("Raw response:", data); if (!data.choices || !data.choices[0] || !data.choices[0].message) { throw new Error("Invalid response format from API"); } const content = data.choices[0].message.content; console.log("Raw content:", content); // Split content into sections more reliably const sections = content.split(/\n\n(?=Antwoordsleutel)/); console.log("Split sections:", sections); // Extract questions section (everything before first "Antwoordsleutel") const questionSection = sections[0] || ""; // Extract answer key (section with "Antwoordsleutel" but not "met uitleg") const answerSection = sections.find((section)=>section.includes("Antwoordsleutel") && !section.includes("met uitleg")) || ""; // Extract explanations (section with "Antwoordsleutel met uitleg") const explanationSection = sections.find((section)=>section.includes("Antwoordsleutel met uitleg")) || ""; console.log("Parsed sections:", { questionSection, answerSection, explanationSection }); // Process questions (split on numbered lines) const processedQuestions = questionSection.split(/(?=^\d+\.)/m).filter((q)=>q.trim() && q.includes("A.")).map((q)=>q.trim()); // Process answers (look for lines with number and single letter answer) const processedAnswers = answerSection.split("\n").filter((line)=>/^\d+\.\s*[A-D]/i.test(line.trim())).map((a)=>a.trim()); // Process explanations (look for lines with number, letter, and explanation) const processedExplanations = explanationSection.split("\n").filter((line)=>/^\d+\.\s*[A-D].*-/i.test(line.trim())).map((e)=>e.trim()); console.log("Processed results:", { questions: processedQuestions, answers: processedAnswers, explanations: processedExplanations }); setQuestions(processedQuestions); setAnswers(processedAnswers); setExplanations(processedExplanations); setResponse(content); } catch (error) { console.error("Error processing response:", error); setResponse("Error: " + error.message); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-8", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 277, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto rounded-lg shadow-md p-6", style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 278, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 282, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 283, columnNumber: 11 }, __self: this }, "Meerkeuzevragengenerator"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFormData({ subject: "Biologie", topic: "Het hart", targetGroup: "Vmbo 1 kader", questionCount: "10", additionalNotes: "Geen bijzonderheden" }), style: { backgroundColor: "#e0d4bc", color: "#000000" }, className: "py-2 px-4 rounded-lg hover:opacity-90 transition-colors", __source: { fileName: "", lineNumber: 286, columnNumber: 11 }, __self: this }, "Demo")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 303, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 304, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-1", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, "Voor welk vak wil je meerkeuzevragen maken?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", value: formData.subject, onChange: handleChange, className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Bijvoorbeeld: Nederlands, Wiskunde, Biologie", style: { backgroundColor: "#143f31", color: "white" }, __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-1", __source: { fileName: "", lineNumber: 320, columnNumber: 15 }, __self: this }, "Wat is het onderwerp van de les?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: formData.topic, onChange: handleChange, className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Bijvoorbeeld: Werkwoorden, Breuken, Fotosynthese", style: { backgroundColor: "#143f31", color: "white" }, __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 333, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-1", __source: { fileName: "", lineNumber: 334, columnNumber: 15 }, __self: this }, "Wie is de doelgroep van je les?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "targetGroup", value: formData.targetGroup, onChange: handleChange, className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Bijvoorbeeld: Groep 8, VMBO-T klas 2, HAVO 4", style: { backgroundColor: "#143f31", color: "white" }, __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 347, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-1", __source: { fileName: "", lineNumber: 348, columnNumber: 15 }, __self: this }, "Hoeveel meerkeuzevragen zou je graag willen?"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "questionCount", value: formData.questionCount, onChange: handleChange, className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Bijvoorbeeld: 5", min: "1", style: { backgroundColor: "#143f31", color: "white" }, __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-white mb-1", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, "Moet ik nog ergens rekening mee houden?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "additionalNotes", value: formData.additionalNotes, onChange: handleChange, className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "Bijvoorbeeld: Eenvoudig taalgebruik, Specifieke leerdoelen", style: { backgroundColor: "#143f31", color: "white" }, __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: isLoading || !formData.subject || !formData.topic || !formData.targetGroup || !formData.questionCount, style: { backgroundColor: "#e0d4bc", color: "#000000" }, className: "w-full py-3 px-6 rounded-lg hover:opacity-90 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors mt-6", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }), "Meerkeuzevragen genereren...") : "Genereer mijn meerkeuzevragen"))), response && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 401, columnNumber: 11 }, __self: this }, !isLoading && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditMode(!editMode), className: `${editMode ? "bg-blue-500" : "bg-gray-500"} text-white py-2 px-4 rounded-lg hover:opacity-90 transition-colors w-full mb-6`, __source: { fileName: "", lineNumber: 403, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit mr-2", __source: { fileName: "", lineNumber: 409, columnNumber: 17 }, __self: this }), editMode ? "Opgeslagen" : "Edit"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6 mb-8", __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 414, columnNumber: 15 }, __self: this }, "Meerkeuzevragen:"), questions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 416, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-2", __source: { fileName: "", lineNumber: 417, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 418, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-medium mb-2", __source: { fileName: "", lineNumber: 419, columnNumber: 23 }, __self: this }, index + 1, "."), editMode ? /*#__PURE__*/ React.createElement("textarea", { value: question, onChange: (e)=>handleEditQuestion(index, e.target.value), className: "w-full p-2 border border-gray-300 rounded", rows: 6, __source: { fileName: "", lineNumber: 421, columnNumber: 25 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 430, columnNumber: 25 }, __self: this }, question)), editMode && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteQuestion(index), className: "ml-2 text-red-500 hover:text-red-600", __source: { fileName: "", lineNumber: 434, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 438, columnNumber: 25 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 446, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 447, columnNumber: 15 }, __self: this }, "Antwoordsleutel:"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4", __source: { fileName: "", lineNumber: 448, columnNumber: 15 }, __self: this }, answers.map((answer, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 450, columnNumber: 19 }, __self: this }, index + 1, ". ", answer.split(".")[1])))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 457, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 458, columnNumber: 15 }, __self: this }, "Antwoordsleutel met uitleg:"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4", __source: { fileName: "", lineNumber: 461, columnNumber: 15 }, __self: this }, explanations.map((explanation, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 463, columnNumber: 19 }, __self: this }, explanation)))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", style: { display: "none" }, __source: { fileName: "", lineNumber: 470, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleExportPDF, className: "w-full bg-green-500 text-white py-3 px-6 rounded-lg hover:bg-green-600 transition-colors", __source: { fileName: "", lineNumber: 471, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-pdf mr-2", __source: { fileName: "", lineNumber: 475, columnNumber: 17 }, __self: this }), "Exporteer naar PDF"), /*#__PURE__*/ React.createElement("button", { onClick: handleExportDOCX, className: "w-full bg-blue-500 text-white py-3 px-6 rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 479, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-word mr-2", __source: { fileName: "", lineNumber: 483, columnNumber: 17 }, __self: this }), "Exporteer naar DOCX"))))); }