ccd-grade4-practise/chapter.html at main · MegaAntony/ccd-grade4-practise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chapter – CCD Grade 4</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>

  <header class="site-header">
    <div class="header-inner">
      <span class="header-logo">✝</span>
      <div class="header-text">
        <div class="header-title">CCD Grade 4 Practice Quizzes</div>
        <div class="header-subtitle">Syro-Malabar Church · Streams of Life 4</div>
      </div>
      <nav class="header-nav">
        <a href="progress.html">📊 My Progress</a>
        <a href="index.html">← All Chapters</a>
      </nav>
    </div>
  </header>

  <main class="main-content">
    <div class="breadcrumb" id="breadcrumb">
      <a href="index.html">Home</a>
      <span>›</span>
      <span id="bc-chapter-name">Chapter</span>
    </div>

    <!-- Page hero -->
    <div class="page-hero" id="chapter-hero">
      <div class="loading"><div class="spinner"></div>Loading chapter…</div>
    </div>

    <!-- Exams section -->
    <div id="exams-section" style="display:none;">
      <div class="section-heading">Choose an Exam</div>
      <div class="exam-list" id="exam-list"></div>

      <!-- Navigation between chapters -->
      <div class="section-heading" style="margin-top:40px;">Navigate Chapters</div>
      <div style="display:flex;gap:12px;flex-wrap:wrap;">
        <a id="btn-prev-ch" href="#" class="btn-secondary" style="display:none;">← Previous Chapter</a>
        <a id="btn-next-ch" href="#" class="btn-secondary" style="display:none;">Next Chapter →</a>
      </div>
    </div>
  </main>

  <footer class="site-footer">
    <p>CCD Grade 4 · Syro-Malabar Church · Streams of Life 4</p>
  </footer>

  <script>
    const CHAPTER_META = {
      8:  { title: "To Receive Jesus Worthily",      topic: "Holy Eucharist & Emmaus Journey" },
      9:  { title: "Let Us Get Reconciled",           topic: "The Prodigal Son, Sin, and Contrition" },
      10: { title: "The Sacrament of Reconciliation", topic: "Zacchaeus and the 5 Conditions" },
      11: { title: "Anointing of the Sick",           topic: "Jesus the Healer and Sacrament of the Sick" },
      12: { title: "The Holy Orders",                 topic: "Priesthood – Eternal and Ministerial" },
      13: { title: "Matrimony",                       topic: "Christian Marriage and Family Life" },
      14: { title: "The Sacramentals",                topic: "Blessings, Holy Myron and Church Rites" },
      15: { title: "Prayer – Conversation With God",  topic: "Lord's Prayer, Types and Fruits of Prayer" },
    };

    const EXAM_DESCRIPTIONS = [
      "Foundation questions on the core story and key concepts",
      "Deeper understanding of the sacrament and scripture",
      "Full review covering all topics in this chapter"
    ];

    const EXAM_ICONS = ["📝", "📖", "🏅"];

    function init() {
      const params = new URLSearchParams(window.location.search);
      const id = parseInt(params.get('id'), 10);

      if (!id || !CHAPTER_META[id]) {
        document.getElementById('chapter-hero').innerHTML =
          '<p style="color:#dc2626;font-weight:600;">Chapter not found. <a href="index.html">Return home</a></p>';
        return;
      }

      const meta = CHAPTER_META[id];
      const chapters = Object.keys(CHAPTER_META).map(Number);
      const idx = chapters.indexOf(id);

      // Update page title
      document.title = `Chapter ${id}: ${meta.title} – CCD Grade 4`;

      // Breadcrumb
      document.getElementById('bc-chapter-name').textContent = `Chapter ${id}: ${meta.title}`;

      // Hero
      document.getElementById('chapter-hero').innerHTML = `
        <span class="badge">Chapter ${id}</span>
        <h1>${meta.title}</h1>
        <p>${meta.topic}</p>
      `;

      // Exam list
      document.getElementById('exams-section').style.display = 'block';
      const list = document.getElementById('exam-list');
      for (let s = 1; s <= 3; s++) {
        const link = document.createElement('a');
        link.href = `quiz.html?chapter=${id}&set=${s}`;
        link.className = 'exam-card';
        link.innerHTML = `
          <div class="exam-icon">${EXAM_ICONS[s-1]}</div>
          <div class="exam-info">
            <h3>Exam ${s}</h3>
            <p>${EXAM_DESCRIPTIONS[s-1]}</p>
          </div>
          <span class="exam-arrow">›</span>
        `;
        list.appendChild(link);
      }

      // Chapter nav
      if (idx > 0) {
        const prevId = chapters[idx - 1];
        const btn = document.getElementById('btn-prev-ch');
        btn.href = `chapter.html?id=${prevId}`;
        btn.textContent = `← Chapter ${prevId}: ${CHAPTER_META[prevId].title}`;
        btn.style.display = 'inline-block';
      }
      if (idx < chapters.length - 1) {
        const nextId = chapters[idx + 1];
        const btn = document.getElementById('btn-next-ch');
        btn.href = `chapter.html?id=${nextId}`;
        btn.textContent = `Chapter ${nextId}: ${CHAPTER_META[nextId].title} →`;
        btn.style.display = 'inline-block';
      }
    }

    document.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>