From dee088ec237e9f141996c241b802b97b90fbe630 Mon Sep 17 00:00:00 2001
From: kristiana-16 <kristiana.wartinger@student.tugraz.at>
Date: Wed, 20 May 2020 11:56:56 +0200
Subject: [PATCH] LANG_007a Basic Implementation of Testing Mode [SF,WK]

---
 .../project/controller/MVCController.java     | 133 +++++++++++++++++-
 src/main/resources/messages.properties        |   1 +
 src/main/resources/messages_de.properties     |   1 +
 src/main/resources/messages_en.properties     |   1 +
 src/main/resources/messages_fr.properties     |   1 +
 src/main/resources/templates/index.html       |  39 ++---
 src/main/resources/templates/user/index.html  |  45 +++---
 .../templates/user/test/testingmode.html      |  83 +++++++++++
 .../user/test/testingmode_e_to_g.html         |  56 ++++++++
 .../user/test/testingmode_g_to_e.html         |  65 +++++++++
 .../user/test/testingmode_repetition.html     |  62 ++++++++
 .../user/test/testingmode_result_english.html |  83 +++++++++++
 .../user/test/testingmode_result_german.html  |  85 +++++++++++
 13 files changed, 611 insertions(+), 44 deletions(-)
 create mode 100644 src/main/resources/templates/user/test/testingmode.html
 create mode 100644 src/main/resources/templates/user/test/testingmode_e_to_g.html
 create mode 100644 src/main/resources/templates/user/test/testingmode_g_to_e.html
 create mode 100644 src/main/resources/templates/user/test/testingmode_repetition.html
 create mode 100644 src/main/resources/templates/user/test/testingmode_result_english.html
 create mode 100644 src/main/resources/templates/user/test/testingmode_result_german.html

diff --git a/src/main/java/com/vocabularytrainer/project/controller/MVCController.java b/src/main/java/com/vocabularytrainer/project/controller/MVCController.java
index f8be0f5..6d2c3a8 100644
--- a/src/main/java/com/vocabularytrainer/project/controller/MVCController.java
+++ b/src/main/java/com/vocabularytrainer/project/controller/MVCController.java
@@ -19,19 +19,21 @@
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.validation.BindingResult;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.*;
 import org.springframework.web.servlet.ModelAndView;
 
 import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpServletRequest;
+import java.util.Collections;
 import java.io.File;
 import java.io.FileInputStream;
 import java.io.IOException;
 import java.util.Arrays;
 import java.util.List;
 
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+
 
 @Controller
 public class MVCController {
@@ -42,6 +44,8 @@ public MVCController(VocabularyRepository vocabularyRepository) {
         this.vocabularyRepository = vocabularyRepository;
     }
 
+    private List<VocabularyEntries> testingdata;
+
     /* Welcome Page */
     @GetMapping("/")
     public String root() {
@@ -323,6 +327,127 @@ public String getFrenchPage() {
         return "user/?lang=fr";
     }
 
+    //Testing Mode
+    @GetMapping("/user/test")
+    public String userTest(Model model) {
+
+        return "user/test/testingmode";
+
+    }
+
+    @GetMapping("/user/testinggerman")
+    public String userTestingGerman(Model model, @RequestParam("amountg") int amountg) {
+
+        //model.addAttribute("amount", userTest.getElementById("amountg"));
+        // tell the thymeleaf which user is logged in
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        UserDetails userDetails = (UserDetails) authentication.getPrincipal();
+
+        model.addAttribute("current_user", userDetails.getUsername());
+
+        // give x vocabulary
+        testingdata = this.vocabularyRepository.showAllVocabularyFromUserX(userDetails.getUsername());
+        Collections.shuffle(testingdata);
+
+        if(amountg < testingdata.size())
+        {
+            testingdata = testingdata.subList(0, amountg);
+        }
+
+        model.addAttribute("overview", testingdata);
+
+        return "user/test/testingmode_e_to_g";
+    }
+
+        /*@RequestMapping("/user/g_result")
+        public String getURLValue(HttpServletRequest request) {
+            String test = request.getRequestURI();
+            return test;
+        }*/
+
+    @GetMapping("/user/testingenglish")
+    public String userTestingEnglish(Model model, @RequestParam("amounte") int amounte) {
+
+
+        //model.getAttribute("amount", userTest("${amounte}"));
+        // tell the thymeleaf which user is logged in
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        UserDetails userDetails = (UserDetails) authentication.getPrincipal();
+
+        model.addAttribute("current_user", userDetails.getUsername());
+
+        // give x vocabulary
+        testingdata = this.vocabularyRepository.showAllVocabularyFromUserX(userDetails.getUsername());
+        Collections.shuffle(testingdata);
+
+        if(amounte < testingdata.size()) {
+            testingdata = testingdata.subList(0, amounte);
+        }
+
+        model.addAttribute("overview", testingdata);
+        return "user/test/testingmode_g_to_e";
+    }
+
+        @RequestMapping(value = "/user/g_result/{result}", method = RequestMethod.GET)
+        @ResponseBody
+        public String getFoosBySimplePathWithPathVariable(
+          @PathVariable("result") char result) {
+            System.out.println(result);
+            return "Get a specific Foo with id=" + result;
+          }
+
+    @GetMapping("/user/g_result")
+    public String userTestResultGerman(Model model) {
+
+        // tell the thymeleaf which user is logged in
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        UserDetails userDetails = (UserDetails) authentication.getPrincipal();
+
+        //model.addAttribute("current_user", userDetails.getUsername());
+
+        // get the Query to show current vocabulary entries of user x
+
+        //System.out.println(input);
+
+        //testingdata = testingdata.subList();
+
+        model.addAttribute("overview", testingdata);
+
+        return "user/test/testingmode_result_german";
+    }
+
+    @GetMapping("/user/e_result")
+    public String userTestResultEnglish(Model model) {
+
+        // tell the thymeleaf which user is logged in
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        UserDetails userDetails = (UserDetails) authentication.getPrincipal();
+
+        model.addAttribute("current_user", userDetails.getUsername());
+
+        // get the Query to show current vocabulary entries of user x
+
+        model.addAttribute("overview", testingdata);
+
+        return "user/test/testingmode_result_english";
+    }
+
+    @GetMapping("/user/repetition")
+    public String userTestRepetition(Model model) {
+
+        // tell the thymeleaf which user is logged in
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+        UserDetails userDetails = (UserDetails) authentication.getPrincipal();
+
+        model.addAttribute("current_user", userDetails.getUsername());
+
+        // get the Query to show current vocabulary entries of user x
+
+        model.addAttribute("overview", testingdata);
+        return "user/test/testingmode_repetition";
+    }
+
+
     /* Export and Download vocabularies as CSV */
     @GetMapping("user/export_vocabularies")
     public ResponseEntity<?> export()
diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
index be9811d..b6076d8 100644
--- a/src/main/resources/messages.properties
+++ b/src/main/resources/messages.properties
@@ -23,6 +23,7 @@ tag=Tag
 add=Add New Vocabulary
 edit_voc=Edit Vocabulary
 studyinterface=Study Interface
+testingmode=Testing Mode
 logout=Logout
 
 #edit_vocab
diff --git a/src/main/resources/messages_de.properties b/src/main/resources/messages_de.properties
index 876691b..b5e96c1 100644
--- a/src/main/resources/messages_de.properties
+++ b/src/main/resources/messages_de.properties
@@ -23,6 +23,7 @@ tag=Taggen
 add=Neue Vokabel hinzufügen
 edit_voc=Vokabel bearbeiten
 studyinterface=Lernumgebung
+testingmode=Testmodus
 logout=Ausloggen
 
 #edit_vocab
diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index be9811d..b6076d8 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -23,6 +23,7 @@ tag=Tag
 add=Add New Vocabulary
 edit_voc=Edit Vocabulary
 studyinterface=Study Interface
+testingmode=Testing Mode
 logout=Logout
 
 #edit_vocab
diff --git a/src/main/resources/messages_fr.properties b/src/main/resources/messages_fr.properties
index 7569071..3460197 100644
--- a/src/main/resources/messages_fr.properties
+++ b/src/main/resources/messages_fr.properties
@@ -23,6 +23,7 @@ tag=Étiquette
 add=Ajouter un nouveau vocabulaire
 edit_voc=Modifier le vocabulaire
 studyinterface=Environnement d'apprentissage
+testingmode=Mode de test
 logout=Se déconnecter
 
 #edit_vocab
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 49a9196..913f65b 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -16,29 +16,30 @@
     <style>
         body { text-align: center; margin-top: 50px;}
     </style>
+    <div align="right">
+        <select id="locales">
+            <option value=""></option>
+            <option value="de" th:text="#{lang.de}"></option>
+            <option value="en" th:text="#{lang.eng}"></option>
+            <option value="fr" th:text="#{lang.fr}"></option>
+        </select>
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            $("#locales").change(function () {
+                var selectedOption = $('#locales').val();
+                if (selectedOption != ''){
+                    window.location.replace('/?lang=' + selectedOption);
+                }
+            });
+        });
+    </script>
 
 </head>
 <body>
-<div align="right">
-    <select id="locales">
-        <option value=""></option>
-        <option value="de" th:text="#{lang.de}"></option>
-        <option value="en" th:text="#{lang.eng}"></option>
-        <option value="fr" th:text="#{lang.fr}"></option>
-    </select>
-</div>
 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script type="text/javascript">
-    $(document).ready(function() {
-        $("#locales").change(function () {
-            var selectedOption = $('#locales').val();
-            if (selectedOption != ''){
-                window.location.replace('/?lang=' + selectedOption);
-            }
-        });
-    });
-</script>
 
 <div th:remove="tag">
 
diff --git a/src/main/resources/templates/user/index.html b/src/main/resources/templates/user/index.html
index 43c0a0d..7144e0b 100644
--- a/src/main/resources/templates/user/index.html
+++ b/src/main/resources/templates/user/index.html
@@ -43,6 +43,27 @@
         }
     </style>
 
+    <div align="right">
+        <select id="locales">
+            <option value=""></option>
+            <option value="de" th:text="#{lang.de}"></option>
+            <option value="en" th:text="#{lang.eng}"></option>
+            <option value="fr" th:text="#{lang.fr}"></option>
+        </select>
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            $("#locales").change(function () {
+                var selectedOption = $('#locales').val();
+                if (selectedOption != ''){
+                    window.location.replace('/user/?lang=' + selectedOption);
+                }
+            });
+        });
+    </script>
+
 </head>
 <body>
 
@@ -62,6 +83,9 @@
             <li class="nav-item">
                 <a class="nav-link" href="/user/studyInterface"><span th:text="#{studyinterface}"></span></a>
             </li>
+            <li class="nav-item">
+                <a class="nav-link" href="/user/test"><span th:text="#{testingmode}"></span></a>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" href="/user/addvoc"><span th:text="#{add}"></span></a>
             </li>
@@ -85,27 +109,6 @@
     <h1 style="display: inline" th:text="#{greeting}"> </h1>
     <h1 style="display: inline; color: lightpink; font-weight: bold" th:text="${current_user}"></h1>
 
-    <div align="right">
-        <select id="locales">
-            <option value=""></option>
-            <option value="de" th:text="#{lang.de}"></option>
-            <option value="en" th:text="#{lang.eng}"></option>
-            <option value="fr" th:text="#{lang.fr}"></option>
-        </select>
-    </div>
-
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-    <script type="text/javascript">
-        $(document).ready(function() {
-            $("#locales").change(function () {
-                var selectedOption = $('#locales').val();
-                if (selectedOption != ''){
-                    window.location.replace('/user/?lang=' + selectedOption);
-                }
-            });
-        });
-    </script>
-
     <br>
     <br>
 
diff --git a/src/main/resources/templates/user/test/testingmode.html b/src/main/resources/templates/user/test/testingmode.html
new file mode 100644
index 0000000..d2ccdbc
--- /dev/null
+++ b/src/main/resources/templates/user/test/testingmode.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
+<head>
+    <meta charset="UTF-8">
+    <title>TestingMode</title>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+
+    <!-- Bootstrap Script Dependencies -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+    <!-- Some Custom Style -->
+    <style>
+        body { text-align: center; margin-top: 50px;}
+    </style>
+
+</head>
+<body>
+    <div th:remove="tag">
+
+        <h5>Testing mode</h5>
+
+        <p>Please enter the amount of vocabulary you want to check:</p>
+        <form method="get" action="/user/testinggerman">
+            <select th:id="amountg" th:name="amountg">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+                <option value="10" selected>10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+                <option value="25">25</option>
+                <option value="30">30</option>
+                <option value="35">35</option>
+                <option value="40">40</option>
+                <option value="45">45</option>
+                <option value="50">50</option>
+                <option value="75">75</option>
+                <option value="100">100</option>
+            </select>
+            <input type="submit" value="English to German">
+        </form>
+
+        </br>
+
+        <form method="get" action="/user/testingenglish">
+            <select th:id="amounte" th:name="amounte">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+                <option value="10" selected>10</option>
+                <option value="15">15</option>
+                <option value="20">20</option>
+                <option value="25">25</option>
+                <option value="30">30</option>
+                <option value="35">35</option>
+                <option value="40">40</option>
+                <option value="45">45</option>
+                <option value="50">50</option>
+                <option value="75">75</option>
+                <option value="100">100</option>
+            </select>
+
+            <input type="submit" value="German to English">
+        </form>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/user/test/testingmode_e_to_g.html b/src/main/resources/templates/user/test/testingmode_e_to_g.html
new file mode 100644
index 0000000..1ad4661
--- /dev/null
+++ b/src/main/resources/templates/user/test/testingmode_e_to_g.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>TestingMode</title>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+
+    <!-- Bootstrap Script Dependencies -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+    <!-- Some Custom Style -->
+    <style>
+        body { text-align: center; margin-top: 50px;}
+    </style>
+
+</head>
+<body>
+
+<div th:remove="tag">
+
+
+    <h5>Testing mode - German</h5></br>
+
+        <div class="container">
+            <form action="/user/g_result" method="get" th:name="result" th:id="result">
+                <table class="table table-striped">
+                    <tr>
+                        <th>
+                          English words:
+                        </th>
+                        <th>
+                            Please enter German translation here:
+                        </th>
+                    </tr>
+                    <th:block th:each="entry : ${overview}">
+                        <tr>
+                            <td>
+                                <span th:text="${entry.engl_trans}"></span>
+                            </td>
+
+                            <td>
+                                <input type="text" th:id="${entry.german_word}" th:name="${entry.german_word}" value="x">
+                            </td>
+                        </tr>
+                    </th:block>
+                </table>
+                <input type="submit" value="Submit!">
+            </form>
+        </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/user/test/testingmode_g_to_e.html b/src/main/resources/templates/user/test/testingmode_g_to_e.html
new file mode 100644
index 0000000..f607bda
--- /dev/null
+++ b/src/main/resources/templates/user/test/testingmode_g_to_e.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>TestingMode</title>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+
+    <!-- Bootstrap Script Dependencies -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+    <!-- Some Custom Style -->
+    <style>
+        body { text-align: center; margin-top: 50px;}
+    </style>
+
+</head>
+<body>
+
+    <div th:remove="tag">
+
+        <h5>Testing mode - English</h5>
+
+        <div class="container">
+            <!--<h2>hier arbeite ich </h2>-->
+            <!--<p><span th:text="${amounte}">25</span></p>-->
+            <!--blablablubb-->
+               <script>
+                   #ctx.getVariable("user/test/amountg")
+               </script>
+
+            <form  action="/user/e_result" method="get">
+                <table class="table table-striped">
+                    <tr>
+                        <th>
+                            English words:
+                        </th>
+                        <th>
+                            Please enter German translation here:
+                        </th>
+                    </tr>
+                    <th:block th:each="entry : ${overview}">
+                        <tr>
+                            <td>
+                                <span th:text="${entry.german_word}"></span>
+                            </td>
+                            <td>
+                                <input type="text" th:id="${entry.engl_trans}" th:name="${entry.engl_trans}" value="x">
+                            </td>
+                        </tr>
+                    </th:block>
+                </table>
+                <input type="submit" value="Submit!">
+            </form>
+
+
+        </div>
+
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/user/test/testingmode_repetition.html b/src/main/resources/templates/user/test/testingmode_repetition.html
new file mode 100644
index 0000000..e103ce5
--- /dev/null
+++ b/src/main/resources/templates/user/test/testingmode_repetition.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>TestingMode</title>
+
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+
+    <!-- Bootstrap Script Dependencies -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+    <!-- Piechart-->
+    <script src="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
+    <script src="https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
+
+
+
+
+    <!-- Some Custom Style -->
+    <style>
+        body { text-align: center; margin-top: 50px;}
+    </style>
+
+</head>
+<body>
+<div th:remove="tag">
+
+
+    <h5>Repetition</h5></br>
+
+    <div class="container">
+        <form action="/user/g_result" method="get">
+            <table class="table table-striped">
+                <tr>
+                    <th>
+                        English words:
+                    </th>
+                    <th>
+                        Please enter German translation here:
+                    </th>
+                </tr>
+                <th:block th:each="entry : ${overview}">
+                    <tr>
+                        <td>
+                            <span th:text="${entry.engl_trans}"></span>
+                        </td>
+                        <td>
+                            <input type="text" th:id="${entry.german_word}" th:name="${entry.german_word}" value="x">
+                        </td>
+                    </tr>
+                </th:block>
+            </table>
+            <input type="submit" value="Submit!">
+        </form>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/user/test/testingmode_result_english.html b/src/main/resources/templates/user/test/testingmode_result_english.html
new file mode 100644
index 0000000..4b51cf5
--- /dev/null
+++ b/src/main/resources/templates/user/test/testingmode_result_english.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>TestingMode</title>
+
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+
+    <!-- Bootstrap Script Dependencies -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+    <!-- Piechart-->
+    <script src="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
+    <script src="https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
+
+
+
+
+    <!-- Some Custom Style -->
+    <style>
+        body { text-align: center; margin-top: 50px;}
+    </style>
+
+</head>
+<body>
+    <div th:remove="tag">
+
+        <h3>Result English:</h3>
+        <!--<div id="container" style="width: 100%; height: 100%; size: 200%; color: darkgray "></div>
+        <script>
+            anychart.onDocumentReady(function() {
+
+                // set the data
+                var data = [
+                    {x: "Correct",value: 8},
+                    {x: "False", value: 2},
+                ];
+
+                // create the chart
+                var chart = anychart.pie();
+
+                // set the chart title
+                //chart.title("Result:");
+
+                // add the data
+                chart.data(data);
+
+                // display the chart in the container
+                chart.container('container');
+                chart.draw();
+            });
+        </script>-->
+
+        <h3>Overview of tested vocabulary:</h3>
+        <div class="container">
+            <table class="table table-striped">
+                <tr>
+                    <th>German Vocabulary</th>
+                    <th>English Translation</th>
+                </tr>
+                <!-- Iterate through all entries using th:each -->
+                <th:block th:each="entry : ${overview}">
+                    <tr>
+                        <td><span th:text="${entry.german_word}"></span></td>
+                        <td><span th:text="${entry.engl_trans}"></span></td>
+                    </tr>
+                </th:block>
+            </table>
+        </div>
+
+        <form action="/user/repetition">
+            <input type="submit" value="Repeat wrong Vocabulary">
+        </form>
+        <a href="/user/test">Testing Mode</a></br>
+        <a href="/user">Back to overview</a>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/user/test/testingmode_result_german.html b/src/main/resources/templates/user/test/testingmode_result_german.html
new file mode 100644
index 0000000..06253f7
--- /dev/null
+++ b/src/main/resources/templates/user/test/testingmode_result_german.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>TestingMode</title>
+
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
+
+    <!-- Bootstrap Script Dependencies -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+
+    <!-- Piechart-->
+    <script src="https://cdn.anychart.com/js/8.0.1/anychart-core.min.js"></script>
+    <script src="https://cdn.anychart.com/js/8.0.1/anychart-pie.min.js"></script>
+
+
+
+
+    <!-- Some Custom Style -->
+    <style>
+        body { text-align: center; margin-top: 50px;}
+    </style>
+
+</head>
+<body>
+    <div th:remove="tag">
+
+        <h3>Result German:</h3>
+        <!--<div id="container" style="width: 100%; height: 100%; size: 200%; color: darkgray "></div>
+        <script>
+            anychart.onDocumentReady(function() {
+
+                // set the data
+                var data = [
+                    {x: "Correct",value: 25},
+                    {x: "False", value: 5},
+                ];
+
+                // create the chart
+                var chart = anychart.pie();
+
+                // set the chart title
+                //chart.title("Result:");
+
+                // add the data
+                chart.data(data);
+
+                // display the chart in the container
+                chart.container('container');
+                chart.draw();
+            });
+        </script>-->
+
+        <h3>Overview of tested vocabulary:</h3>
+        <div class="container">
+            <table class="table table-striped">
+                <tr>
+                    <th>English Vocabulary</th>
+                    <th>German Translation</th>
+                </tr>
+
+                <!-- Iterate through all entries using th:each -->
+                <th:block th:each="entry : ${overview}">
+                    <tr>
+                        <td><span th:text="${entry.engl_trans}"></span></td>
+                        <td><span th:text="${entry.german_word}"></span></td>
+                    </tr>
+                </th:block>
+            </table>
+        </div>
+        <form action="/user/repetition">
+            <input type="submit" value="Repeat wrong Vocabulary">
+        </form>
+
+        <a href="/user/test">Testing Mode</a></br>
+        <a href="/user">Back to overview</a>
+
+
+    </div>
+</body>
+</html>
\ No newline at end of file