Quiz: ${subject} - ${topic}

Doelgroep: ${audience}

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

Vraag ${qIndex + 1}: ${q.question}

${q.options.map((option, oIndex)=>`

${String.fromCharCode(65 + oIndex)}. ${option}

`).join("")} ${quizSubmitted ? `

Correct antwoord: ${String.fromCharCode(65 + q.correctAnswer)}

Uitleg: ${q.explanation}

` : ""}

`).join("")} ${quizSubmitted ? `

Score: ${score}%

` : ""} `; try { const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ source: { html: htmlContent1 } }) }); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `Quiz-${subject}-${topic}.pdf`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (err) { setError("Er is iets misgegaan bij het exporteren naar PDF"); } }; const exportToWord = async ()=>{ if (!quizData) return; try { const pdfResponse = await fetch("/integrations/pdf-generation/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ source: { html: htmlContent } }) }); const pdfBlob = await pdfResponse.blob(); const formData = new FormData(); formData.append("inputFile", pdfBlob, "quiz.pdf"); formData.append("outputType", "docx"); const wordResponse = await fetch("/integrations/file-converter/convert", { method: "POST", body: formData }); const wordBlob = await wordResponse.blob(); const url = window.URL.createObjectURL(wordBlob); const a = document.createElement("a"); a.href = url; a.download = `Quiz-${subject}-${topic}.docx`; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } catch (err) { setError("Er is iets misgegaan bij het exporteren naar Word"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 279, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 280, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 281, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }, "Quiz Generator"), quizData && /*#__PURE__*/ React.createElement("button", { onClick: resetQuiz, className: "bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, "Maak nieuwe quiz")), !quizData && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 bg-white p-6 rounded-lg shadow", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 298, columnNumber: 15 }, __self: this }, "Welk vak geef je?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subject", value: subject, onChange: (e)=>setSubject(e.target.value), className: "w-full p-2 border rounded", placeholder: "Bijvoorbeeld: Geschiedenis", __source: { fileName: "", lineNumber: 301, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 311, columnNumber: 15 }, __self: this }, "Over welk onderwerp moet de quiz gaan?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "topic", value: topic, onChange: (e)=>setTopic(e.target.value), className: "w-full p-2 border rounded", placeholder: "Bijvoorbeeld: Tweede Wereldoorlog", __source: { fileName: "", lineNumber: 314, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 323, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 324, columnNumber: 15 }, __self: this }, "Wat is de doelgroep?"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "audience", value: audience, onChange: (e)=>setAudience(e.target.value), className: "w-full p-2 border rounded", placeholder: "Bijvoorbeeld: HAVO 4", __source: { fileName: "", lineNumber: 327, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 336, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, "Hoeveel vragen wil je? (max. 20)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "questionCount", value: questionCount, onChange: (e)=>setQuestionCount(e.target.value), className: "w-full p-2 border rounded", min: "1", max: "20", __source: { fileName: "", lineNumber: 340, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 350, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, "Taal"), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "w-full p-2 border rounded", __source: { fileName: "", lineNumber: 352, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Nederlands", __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }, "Nederlands"), /*#__PURE__*/ React.createElement("option", { value: "Engels", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, "Engels"), /*#__PURE__*/ React.createElement("option", { value: "Duits", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, "Duits"), /*#__PURE__*/ React.createElement("option", { value: "Frans", __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }, "Frans"))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500", __source: { fileName: "", lineNumber: 363, columnNumber: 23 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: generateQuiz, disabled: loading, className: "w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700 disabled:bg-blue-300", __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }, loading ? "Quiz wordt gegenereerd..." : "Genereer Quiz")), loading && streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow mt-6", __source: { fileName: "", lineNumber: 375, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse", __source: { fileName: "", lineNumber: 376, columnNumber: 13 }, __self: this }, "Genereren..."), /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 377, columnNumber: 13 }, __self: this }, streamingMessage)), quizData && !quizStarted && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow space-y-4", __source: { fileName: "", lineNumber: 382, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 383, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setQuizStarted(true), className: "flex-1 bg-green-600 text-white p-3 rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 384, columnNumber: 15 }, __self: this }, "Maak interactief"), /*#__PURE__*/ React.createElement("button", { onClick: exportToPDF, className: "flex-1 bg-blue-600 text-white p-3 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 390, columnNumber: 15 }, __self: this }, "Exporteer naar PDF"), /*#__PURE__*/ React.createElement("button", { onClick: exportToWord, className: "flex-1 bg-purple-600 text-white p-3 rounded hover:bg-purple-700", __source: { fileName: "", lineNumber: 396, columnNumber: 15 }, __self: this }, "Exporteer naar Word")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 border-t", __source: { fileName: "", lineNumber: 404, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 405, columnNumber: 15 }, __self: this }, "Quiz Overzicht"), quizData.questions.map((q, qIndex)=>/*#__PURE__*/ React.createElement("div", { key: qIndex, className: "mb-4", __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, "Vraag ", qIndex + 1, ": ", q.question), q.options.map((option, oIndex)=>/*#__PURE__*/ React.createElement("p", { key: oIndex, className: "ml-4", __source: { fileName: "", lineNumber: 412, columnNumber: 21 }, __self: this }, String.fromCharCode(65 + oIndex), ". ", option)))), /*#__PURE__*/ React.createElement("hr", { className: "my-4 border-gray-300", __source: { fileName: "", lineNumber: 418, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 419, columnNumber: 15 }, __self: this }, "Antwoordsleutel zonder uitleg:"), quizData.questions.map((q, qIndex)=>/*#__PURE__*/ React.createElement("p", { key: qIndex, __source: { fileName: "", lineNumber: 421, columnNumber: 17 }, __self: this }, "Vraag ", qIndex + 1, ":", " ", String.fromCharCode(65 + q.correctAnswer))), /*#__PURE__*/ React.createElement("hr", { className: "my-4 border-gray-300", __source: { fileName: "", lineNumber: 426, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 427, columnNumber: 15 }, __self: this }, "Antwoordsleutel met uitleg:"), quizData.questions.map((q, qIndex)=>/*#__PURE__*/ React.createElement("div", { key: qIndex, className: "mb-4", __source: { fileName: "", lineNumber: 429, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 430, columnNumber: 19 }, __self: this }, "Vraag ", qIndex + 1, ":", " ", String.fromCharCode(65 + q.correctAnswer)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 ml-4 mt-1", __source: { fileName: "", lineNumber: 434, columnNumber: 19 }, __self: this }, q.explanation))))), quizData && quizStarted && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow mt-6", __source: { fileName: "", lineNumber: 442, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 443, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 444, columnNumber: 15 }, __self: this }, "Quiz"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 445, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setQuizStarted(false), className: "px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200", __source: { fileName: "", lineNumber: 446, columnNumber: 17 }, __self: this }, "Terug naar overzicht"), /*#__PURE__*/ React.createElement("button", { onClick: exportToPDF, className: "px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 452, columnNumber: 17 }, __self: this }, "Exporteer PDF"), /*#__PURE__*/ React.createElement("button", { onClick: exportToWord, className: "px-4 py-2 text-sm bg-purple-600 text-white rounded hover:bg-purple-700", __source: { fileName: "", lineNumber: 458, columnNumber: 17 }, __self: this }, "Exporteer Word"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 467, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full transition-all duration-300", style: { width: `${Object.keys(selectedAnswers).length / quizData.questions.length * 100}%` }, __source: { fileName: "", lineNumber: 468, columnNumber: 15 }, __self: this })), quizData.questions.map((q, qIndex)=>/*#__PURE__*/ React.createElement("div", { key: qIndex, className: "mb-8 p-4 border rounded", __source: { fileName: "", lineNumber: 477, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold mb-3", __source: { fileName: "", lineNumber: 478, columnNumber: 17 }, __self: this }, "Vraag ", qIndex + 1, ": ", q.question), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 481, columnNumber: 17 }, __self: this }, q.options.map((option, oIndex)=>/*#__PURE__*/ React.createElement("div", { key: oIndex, onClick: ()=>handleAnswerSelect(qIndex, oIndex), className: `p-2 rounded cursor-pointer transition-colors ${selectedAnswers[qIndex] === oIndex ? "bg-blue-100 border-blue-500 border" : "bg-gray-50 hover:bg-gray-100"} ${quizSubmitted && oIndex === q.correctAnswer ? "bg-green-100" : ""} ${quizSubmitted && selectedAnswers[qIndex] === oIndex && oIndex !== q.correctAnswer ? "bg-red-100" : ""} `, __source: { fileName: "", lineNumber: 483, columnNumber: 21 }, __self: this }, String.fromCharCode(65 + oIndex), ". ", option))), quizSubmitted && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 497, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 498, columnNumber: 21 }, __self: this }, "Uitleg:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 499, columnNumber: 21 }, __self: this }, q.explanation)))), !quizSubmitted ? /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 506, columnNumber: 15 }, __self: this }, "Verstuur Antwoorden") : /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 513, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 514, columnNumber: 17 }, __self: this }, "Je score: ", score, "%", score >= 70 ? " 🎉" : ""), /*#__PURE__*/ React.createElement("button", { onClick: resetQuiz, className: "w-full bg-green-600 text-white p-3 rounded hover:bg-green-700", __source: { fileName: "", lineNumber: 517, columnNumber: 17 }, __self: this }, "Maak de Quiz Opnieuw"))))); }