display current index in navBar

src/Pages/QuizView.elm

@@ -20,7 +20,7 @@ questionView i q =
                         displayQuestionPage question
                     _ ->
                         displayEndPage
-        navBarDiv = navBar (List.length q.questions)
+        navBarDiv = navBar i (List.length q.questions)
     in
     div [ class "questionView" ]
         [ navBarDiv, toDisplay ]
@@ -142,10 +142,18 @@ prevPageBtn =
         [ onClick GoToPrevQuestion, class "navBtn" ] 
         [ text "Zurück" ]
 
-navBar : Int -> Html Msg
-navBar n =
+navBar : Int -> Int -> Html Msg
+navBar index n =
     let
-        buttons = List.range 0 (n - 1) |> List.map (\x -> button [ onClick (GoToQuestion x), class "navBarBtn" ] [ text ("Frage " ++ String.fromInt (x + 1))])
+        buttons = List.range 0 (n - 1) |> List.map 
+            (\x -> 
+                let
+                    classAttribute = if x == index then "navBarBtn curIndex" else "navBarBtn"
+                in
+                button 
+                    [ onClick (GoToQuestion x), class classAttribute ] 
+                    [ text ("Frage " ++ String.fromInt (x + 1))]
+                )
     in
     div [ class "navBar" ] 
         [ div [ class "navBarBtns" ] buttons

src/style.css

@@ -311,12 +311,20 @@ button.navBarBtn {
   margin-bottom: 4px;
   background-color: transparent;
   color: #fff;
-  border: none;
-  transition: color 0.2s ease;
+  border: solid;
+  border-radius: 5px;
+  border-width: thin;
+  border-color: transparent;
+  transition: color 0.2s ease, border-color 1.0s ease;
 }
 
-button.navBarBtn:hover {
+button.navBarBtn:hover:not(.curIndex) {
   color: #007acc;
+  cursor: pointer;
+}
+
+button.navBarBtn.curIndex {
+  border-color: #fff;
 }
 
 button.navBtn {