Changes to maronite-heritage.scroll.pub

root
root
25 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+ Home
+ Quizzes
+ Gallery
+
+
+
+
+
+
+

Discover Maronite History

+

Test your knowledge about one of the oldest Christian communities

+
+
+
+
+
+

+
+
+ Score: 0
+
+
+
+
+
+
+

Historical Gallery

+
+
+
+
Saint Maron (4th Century)
+
+
+
+
Qadisha Valley Monasteries
+
+
+
+
First Maronite Patriarch
+
+
+
+
+
+
+

Created with dedication to preserve Maronite heritage

+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://maronite-heritage.scroll.pub
+ metaTags
+ description "Interactive quizzes about Maronite history and heritage. Learn about this ancient Christian community through engaging questions and beautiful visuals."
+ keywords "Maronite, history quiz, Lebanese Christians, Middle Eastern Christianity, interactive learning"
+ editButton /edit.html
+ title Maronite Heritage Quiz
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01VFdh7KHDuDRZEsK8De61Zn",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a complete interactive Maronite history quiz website:\n\n---domain---\nmaronite-heritage.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://maronite-heritage.scroll.pub\nmetaTags\n description \"Interactive quizzes about Maronite history and heritage. Learn about this ancient Christian community through engaging questions and beautiful visuals.\"\n keywords \"Maronite, history quiz, Lebanese Christians, Middle Eastern Christianity, interactive learning\"\neditButton /edit.html\ntitle Maronite Heritage Quiz\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
\n \n
\n\n
\n
\n

Discover Maronite History

\n

Test your knowledge about one of the oldest Christian communities

\n \n
\n\n
\n
\n

\n
\n
\n Score: 0\n \n
\n
\n
\n\n
\n

Historical Gallery

\n
\n
\n
\n
Saint Maron (4th Century)
\n
\n
\n
\n
Qadisha Valley Monasteries
\n
\n
\n
\n
First Maronite Patriarch
\n
\n
\n
\n
\n\n
\n

Created with dedication to preserve Maronite heritage

\n
\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --text-color: #333;\n --light-bg: #ecf0f1;\n --white: #ffffff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background: var(--primary-color);\n color: var(--white);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links a {\n color: var(--white);\n text-decoration: none;\n margin-left: 2rem;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 2rem;\n background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), \n var(--light-bg);\n color: var(--white);\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n padding: 1rem 2rem;\n font-size: 1.2rem;\n background: var(--accent-color);\n color: var(--white);\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: scale(1.05);\n}\n\n.quiz-card {\n max-width: 800px;\n margin: 2rem auto;\n padding: 2rem;\n background: var(--white);\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.options-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin: 2rem 0;\n}\n\n.option {\n padding: 1rem;\n border: 2px solid var(--primary-color);\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.option:hover {\n background: var(--light-bg);\n}\n\n.option.correct {\n background: #27ae60;\n color: var(--white);\n}\n\n.option.wrong {\n background: var(--accent-color);\n color: var(--white);\n}\n\n.gallery {\n padding: 4rem 2rem;\n}\n\n.gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.gallery-item {\n text-align: center;\n}\n\n.img-placeholder {\n height: 200px;\n background: var(--light-bg);\n border-radius: 10px;\n margin-bottom: 1rem;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: var(--white);\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\nconst quizData = [\n {\n question: \"Who was Saint Maron?\",\n options: [\n \"A 4th-century Syrian Christian monk\",\n \"A Roman emperor\",\n \"A Lebanese president\",\n \"A medieval scholar\"\n ],\n correct: 0\n },\n {\n question: \"Where did the early Maronite community first settle?\",\n options: [\n \"Egypt\",\n \"Mount Lebanon\",\n \"Rome\",\n \"Constantinople\"\n ],\n correct: 1\n },\n {\n question: \"What is the primary language of the Maronite liturgy?\",\n options: [\n \"Arabic\",\n \"Latin\",\n \"Syriac\",\n \"Greek\"\n ],\n correct: 2\n }\n];\n\nlet currentQuestion = 0;\nlet score = 0;\n\nfunction startQuiz() {\n document.getElementById('home').classList.add('hidden');\n document.getElementById('quiz-container').classList.remove('hidden');\n loadQuestion();\n}\n\nfunction loadQuestion() {\n const question = quizData[currentQuestion];\n document.getElementById('question').textContent = question.question;\n \n const optionsContainer = document.getElementById('options');\n optionsContainer.innerHTML = '';\n \n question.options.forEach((option, index) => {\n const button = document.createElement('button');\n button.classList.add('option');\n button.textContent = option;\n button.onclick = () => selectOption(index);\n optionsContainer.appendChild(button);\n });\n \n document.getElementById('next-btn').disabled = true;\n}\n\nfunction selectOption(index) {\n const options = document.querySelectorAll('.option');\n options.forEach(option => {\n option.disabled = true;\n });\n \n if (index === quizData[currentQuestion].correct) {\n options[index].classList.add('correct');\n score++;\n } else {\n options[index].classList.add('wrong');\n options[quizData[currentQuestion].correct].classList.add('correct');\n }\n \n document.getElementById('score').textContent = `Score: ${score}`;\n document.getElementById('next-btn').disabled = false;\n}\n\nfunction nextQuestion() {\n currentQuestion++;\n \n if (currentQuestion < quizData.length) {\n loadQuestion();\n } else {\n document.getElementById('quiz-container').innerHTML = `\n
\n

Quiz Complete!

\n

Your final score: ${score}/${quizData.length}

\n \n
\n `;\n }\n}\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 289,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2409
+ }
+ }
readme.scroll
Changed around line 1
+ # maronite-heritage.scroll.pub
+ Website generated by Claude from prompt: Interactive with quizzes about the history of the Maronite people with pictures and graphics
script.js
Changed around line 1
+ const quizData = [
+ {
+ question: "Who was Saint Maron?",
+ options: [
+ "A 4th-century Syrian Christian monk",
+ "A Roman emperor",
+ "A Lebanese president",
+ "A medieval scholar"
+ ],
+ correct: 0
+ },
+ {
+ question: "Where did the early Maronite community first settle?",
+ options: [
+ "Egypt",
+ "Mount Lebanon",
+ "Rome",
+ "Constantinople"
+ ],
+ correct: 1
+ },
+ {
+ question: "What is the primary language of the Maronite liturgy?",
+ options: [
+ "Arabic",
+ "Latin",
+ "Syriac",
+ "Greek"
+ ],
+ correct: 2
+ }
+ ];
+
+ let currentQuestion = 0;
+ let score = 0;
+
+ function startQuiz() {
+ document.getElementById('home').classList.add('hidden');
+ document.getElementById('quiz-container').classList.remove('hidden');
+ loadQuestion();
+ }
+
+ function loadQuestion() {
+ const question = quizData[currentQuestion];
+ document.getElementById('question').textContent = question.question;
+
+ const optionsContainer = document.getElementById('options');
+ optionsContainer.innerHTML = '';
+
+ question.options.forEach((option, index) => {
+ const button = document.createElement('button');
+ button.classList.add('option');
+ button.textContent = option;
+ button.onclick = () => selectOption(index);
+ optionsContainer.appendChild(button);
+ });
+
+ document.getElementById('next-btn').disabled = true;
+ }
+
+ function selectOption(index) {
+ const options = document.querySelectorAll('.option');
+ options.forEach(option => {
+ option.disabled = true;
+ });
+
+ if (index === quizData[currentQuestion].correct) {
+ options[index].classList.add('correct');
+ score++;
+ } else {
+ options[index].classList.add('wrong');
+ options[quizData[currentQuestion].correct].classList.add('correct');
+ }
+
+ document.getElementById('score').textContent = `Score: ${score}`;
+ document.getElementById('next-btn').disabled = false;
+ }
+
+ function nextQuestion() {
+ currentQuestion++;
+
+ if (currentQuestion < quizData.length) {
+ loadQuestion();
+ } else {
+ document.getElementById('quiz-container').innerHTML = `
+
+

Quiz Complete!

+

Your final score: ${score}/${quizData.length}

+
+
+ `;
+ }
+ }
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --text-color: #333;
+ --light-bg: #ecf0f1;
+ --white: #ffffff;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: var(--white);
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+ .nav-links a {
+ color: var(--white);
+ text-decoration: none;
+ margin-left: 2rem;
+ transition: color 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ color: var(--accent-color);
+ }
+
+ .hero {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
+ var(--light-bg);
+ color: var(--white);
+ }
+
+ .hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ }
+
+ .cta-button {
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ background: var(--accent-color);
+ color: var(--white);
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ }
+
+ .cta-button:hover {
+ transform: scale(1.05);
+ }
+
+ .quiz-card {
+ max-width: 800px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background: var(--white);
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+
+ .options-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ margin: 2rem 0;
+ }
+
+ .option {
+ padding: 1rem;
+ border: 2px solid var(--primary-color);
+ border-radius: 5px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .option:hover {
+ background: var(--light-bg);
+ }
+
+ .option.correct {
+ background: #27ae60;
+ color: var(--white);
+ }
+
+ .option.wrong {
+ background: var(--accent-color);
+ color: var(--white);
+ }
+
+ .gallery {
+ padding: 4rem 2rem;
+ }
+
+ .gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .gallery-item {
+ text-align: center;
+ }
+
+ .img-placeholder {
+ height: 200px;
+ background: var(--light-bg);
+ border-radius: 10px;
+ margin-bottom: 1rem;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: var(--white);
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+ }