feat: add next question button functionality

3 files changed, 67 insertions, 19 deletions

diff --git a/assets/style.css b/assets/style.css
index d71d3fd..439eb7f 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -12,6 +12,21 @@ body{
     text-align: center;
     display: block;
 }
+
+.next-button {
+    margin-top: 1rem;
+    padding: 0.5rem 1rem;
+    background: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.next-button:hover {
+    background-color: #45a049;
+}
 a{
     color: #00a2e7;
 }
diff --git a/components/index.html b/components/index.html
index b51c0e3..f0f18f0 100644
--- a/components/index.html
+++ b/components/index.html
@@ -20,6 +20,16 @@
                 <div class="wrong-answer">Try Again</div>
               {{end}}
               <div class="explanation">{{.Explanation}}</div>
+              {{if .ShowNext}}
+              <button 
+                  hx-get="/next-question?current_id={{.ID}}" 
+                  hx-target="#ancestor"
+                  hx-swap="outerHTML"
+                  class="next-button"
+                  data-testid="next-button">
+                Next Question →
+              </button>
+              {{end}}
             </div>
             <div id="options">
                 <button 
diff --git a/internal/handlers/main.go b/internal/handlers/main.go
index b907a34..edda1bf 100644
--- a/internal/handlers/main.go
+++ b/internal/handlers/main.go
@@ -13,9 +13,10 @@ import (
 
 // Handlers structure
 type Handlers struct {
-	cfg  config.Config
-	log  *slog.Logger
-	repo repos.FullRepo
+	cfg      config.Config
+	log      *slog.Logger
+	repo     repos.FullRepo
+	showNext bool // Tracks when to show next button
 }
 
 // NewHandlers constructor
@@ -79,6 +80,7 @@ func (h *Handlers) HandleAnswer(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	selectedIdx++ // in db index starts from 1
+	h.showNext = true
 	feedback := ""
 	if selectedIdx == int(question.CorrectIndex) {
 		feedback = `<div data-testid="feedback" class="feedback">Correct! 🎉</div>`
@@ -105,29 +107,50 @@ func getCorrectOption(q *models.Question) string {
 	}
 }
 
-func (h *Handlers) MainPage(w http.ResponseWriter, r *http.Request) {
+func (h *Handlers) HandleNextQuestion(w http.ResponseWriter, r *http.Request) {
+	currentID := r.URL.Query().Get("current_id")
+	nextID, _ := strconv.Atoi(currentID)
+	nextID++
+
+	question, err := h.repo.DBGetQuestion(strconv.Itoa(nextID))
+	if err != nil {
+		h.log.Error("failed to get next question", "error", err)
+		abortWithError(w, "No more questions")
+		return
+	}
+
+	h.showNext = false // Reset flag for new question
+	h.renderQuestion(w, question)
+}
+
+func (h *Handlers) renderQuestion(w http.ResponseWriter, question *models.Question) {
 	tmpl, err := template.ParseGlob("components/*.html")
 	if err != nil {
 		abortWithError(w, err.Error())
 		return
 	}
-	testQuestion := &models.Question{
-		ID:           1,
-		Text:         "___ du keine Zweifel daran? (Test Question)",
-		Option1:      "Haben",
-		Option2:      "Hast",
-		Option3:      "Hat",
-		Option4:      "Habt",
-		CorrectIndex: 1,
-		Requirement:  "Choose the correct verb form",
-		Explanation:  "Use 'Hast' for 2nd person singular",
-		Status:       0,
-		ExamID:       1,
-		MixedID:      101,
+
+	// Add ShowNext flag to template data
+	type TemplateData struct {
+		*models.Question
+		ShowNext bool
 	}
-	err = tmpl.ExecuteTemplate(w, "main", testQuestion)
+	
+	err = tmpl.ExecuteTemplate(w, "main", &TemplateData{
+		Question: question,
+		ShowNext: h.showNext,
+	})
 	if err != nil {
 		h.log.Error("failed to render template", "error", err)
-		abortWithError(w, "Failed to render page")
 	}
 }
+	question, err := h.repo.DBGetQuestion("1")
+	if err != nil {
+		h.log.Error("failed to get question", "error", err)
+		abortWithError(w, "Question not found")
+		return
+	}
+
+	h.showNext = false
+	h.renderQuestion(w, question)
+}