Skip to content
Snippets Groups Projects
Commit ae00c2ca authored by Jannik Wurche's avatar Jannik Wurche
Browse files

:scroll: add comments

parent 2484cb9e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 31 additions and 1 deletion
src/Pages/QuizView.elm
+ 31
− 1
View file @ ae00c2ca
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment