diff --git a/src/Pages/QuizView.elm b/src/Pages/QuizView.elm
index 1a4d5aef3ccf4ab0c9015d2c04dab8c83c735134..c9c27cd14dc7c09dcde55c600a6eed50267db13a 100644
--- a/src/Pages/QuizView.elm
+++ b/src/Pages/QuizView.elm
@@ -8,9 +8,11 @@ import Utils.SVGGenerator exposing (generateSVG)
import Utils.HelperFunction exposing (getQuestionAt)
import LaTeX.Expression
+-- Function to render the view for a specific question in the quiz.
questionView : Int -> Quiz -> Html Msg
questionView i q =
let
+ -- Determine what to display based on the question index.
toDisplay = if i < 0
then
displayFrontPage q
@@ -20,14 +22,18 @@ questionView i q =
displayQuestionPage question
_ ->
displayEndPage
+ -- Navigation bar for moving between questions.
navBarDiv = navBar i (List.length q.questions)
in
+ -- Combine the navigation bar with the current display content.
div [ class "questionView" ]
[ navBarDiv, toDisplay ]
+-- Function to display the front page of the quiz, showing the quiz title and duration.
displayFrontPage : Quiz -> Html Msg
displayFrontPage q =
let
+ -- Display the quiz duration if it is specified.
durationText = case q.duration of
Just t -> p [] [ text ("Bearbeitungszeit: " ++ (String.fromInt t) ++ " Minuten")]
Nothing -> p [] []
@@ -39,6 +45,7 @@ displayFrontPage q =
, div [ class "navigation" ]
[ nextPageBtn ] ]
+-- Function to display the end page when the quiz is completed.
displayEndPage : Html Msg
displayEndPage =
div [ class "quiz endPage" ]
@@ -46,6 +53,7 @@ displayEndPage =
, div [ class "navigation" ]
[ prevPageBtn, finishQuizBtn ]]
+-- Function to display a specific question page, including the navigation buttons.
displayQuestionPage : Question -> Html Msg
displayQuestionPage q =
div [ class "quiz" ]
@@ -53,24 +61,31 @@ displayQuestionPage q =
, div [ class "navigation"]
[ prevPageBtn, nextPageBtn ]]
+-- Function to display the content of a specific question, including hints, images, graphs, and answer options.
displayQuestion : Question -> Html Msg
displayQuestion q =
let
+ -- Display the hint if available.
hintDiv = case q.hint of
Just hint -> LaTeX.Expression.compile hint
_ -> div [ class "invisible" ] []
+ -- Display the image if available.
imageDiv = case q.image of
Just url -> div [ class "imgDiv" ] [ img [ src url ] [ ] ]
Nothing -> div [ class "invisible" ] []
+ -- Display the graph if available.
funcDiv = case q.graph of
Just gr -> div [ class "svgDiv" ] [ generateSVG {functions = gr.functions, window = gr.window} ]
Nothing -> div [ class "invisible" ] []
+ -- Display the appropriate answer options based on the question type.
answerDiv = case q.questionType of
MCQ x -> displayMCQ q.id x
SCQ x -> displaySCQ q.id x
Input x -> displayInput q.id x
+ -- Create a header prefix for the question.
headerPrefix = "Frage " ++ String.fromInt (q.id + 1) ++ ":"
in
+ -- Combine all parts to display the question.
div [ class "question" ]
[ div [ class "header" ]
[ h3 [ class "header-prefix" ] [ text headerPrefix ]
@@ -82,11 +97,13 @@ displayQuestion q =
, funcDiv ]
, answerDiv ]
--- Updated displayMCQ function
+-- Function to display Multiple Choice Questions (MCQ).
displayMCQ : Int -> { choices : List String, correct : List String, userSelection : List String } -> Html Msg
displayMCQ qid q =
let
+ -- Get the user's current selections.
userAnswers = q.userSelection
+ -- Create a div for each choice with LaTeX support and selection highlighting.
divs = List.map (\choice ->
let
selectedClass = if List.member choice userAnswers then "selected" else ""
@@ -96,11 +113,14 @@ displayMCQ qid q =
[ latex ]
) q.choices
in
+ -- Wrap all choice divs in a container.
div [ class "choicesMCQ" ] divs
+-- Function to display Single Choice Questions (SCQ).
displaySCQ : Int -> { choices : List String, correct : String, userSelection : String } -> Html Msg
displaySCQ qid q =
let
+ -- Create a div for each choice with LaTeX support and selection highlighting.
divs = List.map (\choice ->
let
selectedClass = if choice == q.userSelection then "selected" else ""
@@ -110,11 +130,14 @@ displaySCQ qid q =
[ latex ]
) q.choices
in
+ -- Wrap all choice divs in a container.
div [ class "choicesSCQ" ] divs
+-- Function to display input-based questions.
displayInput : Int -> { correct : List String, sensitive : Bool, userSelection : String } -> Html Msg
displayInput qid q =
let
+ -- Display the input field with the current user selection or placeholder text.
inputToDisplay = if q.userSelection == ""
then input [ onInput (AnswerQuestion qid)
, placeholder "Antwort"
@@ -123,28 +146,34 @@ displayInput qid q =
, value q.userSelection
, class "inputField" ] [ ]
in
+ -- Wrap the input field in a container.
div [ class "choiceInput" ]
[ inputToDisplay ]
+-- Button to finish the quiz and go to the results page.
finishQuizBtn : Html Msg
finishQuizBtn =
a [ href "/result", class "btn" ] [ text "Quiz beenden" ]
+-- Button to go to the next question.
nextPageBtn : Html Msg
nextPageBtn =
button
[ onClick GoToNextQuestion, class "navBtn" ]
[ text "Weiter" ]
+-- Button to go to the previous question.
prevPageBtn : Html Msg
prevPageBtn =
button
[ onClick GoToPrevQuestion, class "navBtn" ]
[ text "Zurück" ]
+-- Navigation bar for moving between questions.
navBar : Int -> Int -> Html Msg
navBar index n =
let
+ -- Create a button for each question in the quiz.
buttons = List.range 0 (n - 1) |> List.map
(\x ->
let
@@ -155,6 +184,7 @@ navBar index n =
[ text ("Frage " ++ String.fromInt (x + 1))]
)
in
+ -- Wrap the navigation buttons and finish button in a container.
div [ class "navBar" ]
[ div [ class "navBarBtns" ] buttons
, finishQuizBtn ]
\ No newline at end of file