JLearner All functionality

colors/icons/correct.svg

@@ -0,0 +1,14 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.928 4.59635C15.656 4.59154 15.3937 4.6962 15.2018 4.88607L14.7443 5.33897L14.7532 5.3477L10.6335 9.40399C10.3409 9.69209 10.3409 10.1592 10.6335 10.4472L12.8293 12.6093C13.1219 12.8974 13.5962 12.8974 13.8888 12.6093L18.0198 8.54183L18.0206 8.54261L20.7408 5.93893C21.2184 5.48177 20.898 4.68415 20.232 4.6724L15.928 4.59635Z" fill="url(#paint0_linear_451_3032)"/>
+<path d="M6.07245 9.17448C6.34442 9.16967 6.6067 9.27425 6.79855 9.4642L7.25611 9.91706L7.24725 9.92579L11.3669 13.9821C11.6595 14.2702 11.6595 14.7373 11.3669 15.0254L9.17115 17.1873C8.87858 17.4754 8.40417 17.4754 8.11157 17.1873L3.98062 13.1199L3.9798 13.1207L1.25963 10.5171C0.782021 10.0599 1.10244 9.26227 1.7684 9.25053L6.07245 9.17448Z" fill="url(#paint1_linear_451_3032)"/>
+<defs>
+<linearGradient id="paint0_linear_451_3032" x1="13.3523" y1="13.0948" x2="3.69727" y2="3.70258" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2AD454"/>
+<stop offset="1" stop-color="#B3FF5A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_451_3032" x1="13.3518" y1="13.0948" x2="3.69684" y2="3.70247" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2AD454"/>
+<stop offset="1" stop-color="#B3FF5A"/>
+</linearGradient>
+</defs>
+</svg>

colors/icons/wrong.svg

@@ -0,0 +1,24 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_451_2160)">
+<path d="M20.2812 11C20.2812 5.87599 16.124 1.71875 11 1.71875C5.87599 1.71875 1.71875 5.87599 1.71875 11C1.71875 16.124 5.87599 20.2812 11 20.2812C16.124 20.2812 20.2812 16.124 20.2812 11Z" stroke="url(#paint0_linear_451_2160)" stroke-width="2.6" stroke-miterlimit="10"/>
+<path d="M14.0938 14.0938L7.90625 7.90625" stroke="url(#paint1_linear_451_2160)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.90625 14.0938L14.0938 7.90625" stroke="url(#paint2_linear_451_2160)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_451_2160" x1="20.2263" y1="1.83639" x2="1.81064" y2="20.0988" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE7970"/>
+<stop offset="1" stop-color="#DC3282"/>
+</linearGradient>
+<linearGradient id="paint1_linear_451_2160" x1="14.0754" y1="7.94547" x2="7.93688" y2="14.0329" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE7970"/>
+<stop offset="1" stop-color="#DC3282"/>
+</linearGradient>
+<linearGradient id="paint2_linear_451_2160" x1="14.0754" y1="7.94547" x2="7.93688" y2="14.0329" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE7970"/>
+<stop offset="1" stop-color="#DC3282"/>
+</linearGradient>
+<clipPath id="clip0_451_2160">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

modules/japanese/JLearner.qml

@@ -15,6 +15,11 @@ PanelWindow {
     visible: true
     focusable: true
 
+    Component.onCompleted: {
+        semiJLoader.all_invisible()
+        languageChooser.visible = true
+    }
+
     FocusScope {
         id: jLearnerScope
         focus: true
@@ -35,46 +40,81 @@ PanelWindow {
     Rectangle {
         anchors.fill: parent
         radius: 10
-        color: Qt.alpha(Colors.surfaceContainerLowest, 0.5)
+        // color: Qt.alpha(Colors.surfaceContainerLowest, 0.5)
+
+        color: "blue"
 
         border.width: 2
         border.color: Colors.outlineVariant
 
         clip: true
 
+        Rectangle{
+            width: parent.width - 20
+            height: parent.height - 20
+            anchors.centerIn: parent
+            color: "pink"
+
             Column {
-            id: window
+                id: learnerWindow
                 anchors.fill: parent
                 spacing: 10
 
                 Rectangle {
                     id: head
-                width: window.width
+                    width: parent.width
-                height: window.height * 0.1
+                    height: parent.height * 0.1
                     color: "#FFFFFF"
 
                     Text {
                         text: "Language Learner"
                         anchors.centerIn: parent
-                    font.pixelSize: 48
+                        font.pixelSize: parent.height * 0.8
                         color: "black"
                     }
                 }
 
-            function switch_KanaVoicing() {
+                Rectangle{
+                    id: semiJLoader
+                    width: parent.width
+                    height: parent.height * 0.9 - parent.spacing
+
+                    color: "orange"
+
+                    function all_invisible() {
                         languageChooser.visible = false
-                kanaVoicing.visible = true
+                        kanaVoicing.visible = false
+                        voicingKana.visible = false
+                        learnerResult.visible = false
                     }
 
                     function switchModeChooser() {
+                        all_invisible()
                         languageChooser.visible = true
-                kanaVoicing.visible = false
+                        languageChooser.start()
                     }
 
-            function switchResult(result) {
+                    function switch_KanaVoicing() {
+                        all_invisible()
+                        kanaVoicing.visible = true
+                        kanaVoicing.start()
+                    }
+
+                    function switch_VoicingKana() {
+                        all_invisible()
+                        voicingKana.visible = true
+                        voicingKana.start()
+                    }
+
+                    function switchResult(result, mode, results) {
+                        all_invisible()
                         console.log("Result: " + result)
-                languageChooser.visible = true
+                        console.log("Mode: " + mode)
-                kanaVoicing.visible = false
+                        learnerResult.visible = true
+                        learnerResult.result = result
+                        learnerResult.mode = mode
+                        learnerResult.results = results
+                        learnerResult.start()
                     }
 
                     ModeChooser {
@@ -85,10 +125,15 @@ PanelWindow {
                         id: kanaVoicing
                     }
 
-            // KanaVoicing {
+                    VoicingKana {
-            //     id: kanaVoicing
+                        id: voicingKana
-            // }
+                    }
 
+                    JLearnerResult {
+                        id: learnerResult
+                    }
+                }
+            }
         }
     }
 }

modules/japanese/modules/JLearnerResult.qml

@@ -0,0 +1,255 @@
+import QtQuick
+import QtQuick.Controls
+import "../../../colors"
+
+Item { // Chooser
+    id: learnerResult
+    width: parent.width
+    height: parent.height
+    anchors.margins: 15
+    visible: false
+
+    function switch_KanaVoicing() {
+        parent.switch_KanaVoicing()
+    }
+
+    function start() {
+    }
+
+    property real result: 0
+    property string mode: ""
+    property var results: createResults(10)
+
+    function createResults(n) {
+        var arr = []
+        for (var i = 0; i < n; i++) {
+            arr.push({
+                kana: "あ",
+                correctness: false,
+                answer: "a",
+                correct: "a"
+            })
+        }
+        return arr
+    }
+
+    Column {
+        anchors.fill: parent
+        spacing: 10
+
+        Rectangle {
+            id: learnerResultUpperText
+            color: "#FFFFFF"
+            width: parent.width
+            height: parent.height * 0.1
+
+            Text {
+                id: mainText
+                text: "Ergebnisse:"
+                anchors.centerIn: parent
+                font.pixelSize: parent.height * 0.6
+                color: "black"
+            }
+        }
+
+        Row {
+            width: parent.width
+            height: parent.height - learnerResultUpperText.height - parent.spacing
+            spacing: 10
+            Rectangle {
+                width: parent.width * 0.25
+                height: parent.height
+                color: "transparent"
+                Column{
+                    width: parent.width
+                    height: parent.height
+                    spacing: 10
+
+                    Repeater{
+                        model: results
+
+                        Row{
+                            width: parent.width
+                            height: parent.height/10 - parent.spacing * 0.9
+                            spacing: 10
+
+                            Rectangle{
+                                width: parent.height
+                                height: parent.height
+                                color: "white"
+
+                                Text{
+                                    text: modelData.kana
+                                    width: parent.width
+                                    height: parent.height
+                                    anchors.centerIn: parent
+                                    anchors.verticalCenterOffset: -parent.height * 0.125
+                                    font.pixelSize: parent.height * 0.8
+                                    color: modelData.correctness ? "green" : "red"
+                                }
+                            }
+
+                            Rectangle{
+                                width: parent.height
+                                height: parent.height
+                                color: "white"
+
+                                Image {
+                                    source: modelData.correctness ? "../../../colors/icons/correct.svg" : "../../../colors/icons/wrong.svg"
+                                    anchors.centerIn: parent
+                                    width: parent.height*0.8
+                                    height: parent.height*0.8
+
+                                    smooth: true
+                                    sourceSize.width: width
+                                    sourceSize.height: height
+                                }
+                            }
+
+                            Rectangle{
+                                width: parent.width - parent.height *2 - parent.spacing*2
+                                height: parent.height
+                                color: "white"
+
+                                Text{
+                                    text: "[" + modelData.correct + "]"
+                                    width: parent.width
+                                    height: parent.height
+                                    anchors.centerIn: parent
+                                    anchors.horizontalCenterOffset: 10
+                                    font.pixelSize: parent.height * 0.8
+                                    color: modelData.correctness ? "green" : "red"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            
+            Rectangle{
+                width: parent.width * 0.75
+                height: parent.height
+                color: "transparent"
+                Column{
+                    width: parent.width
+                    height: parent.height
+                    spacing: 10
+                    Row {
+                        spacing: 10
+                        width: parent.width
+                        height: parent.height * 4 / 10 - parent.spacing * 2 / 3
+
+                        Rectangle {
+                            color: "transparent"
+                            width: (parent.width - (learnerLastResultKanaBG.width + learnerLastResultTextBG.width))/2
+                            height: parent.height
+                        }
+
+                        Rectangle {
+                            id: learnerLastResultKanaBG
+                            color: "#FFFFFF"
+                            width: parent.height - parent.spacing
+                            height: parent.height
+
+                            Text {
+                                id: learnerLastResultKana
+                                text: results[results.length-1].kana
+                                width: parent.width
+                                height: parent.height
+                                anchors.centerIn: parent
+                                anchors.verticalCenterOffset: -parent.height * 0.1
+                                font.pixelSize: parent.height * 0.8
+                                color: results[results.length-1].correctness ? "green" : "red"
+                            }
+                        }
+
+                        Rectangle {
+                            id: learnerLastResultTextBG
+                            color: "#FFFFFF"
+                            width: learnerLastResultText.width + 2 * parent.spacing
+                            height: parent.height
+
+                            Text {
+                                id: learnerLastResultText
+                                text: "[" + results[results.length-1].correct + "]"
+                                anchors.centerIn: parent
+                                font.pixelSize: learnerLastResultKana.font.pixelSize/2
+                                color: results[results.length-1].correctness ? "green" : "red"
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        id: learnerResultTextBG
+                        color: "#FFFFFF"
+                        width: parent.width
+                        height: parent.height * 3 / 10 - parent.spacing * 2 / 3
+
+                        Text {
+                            id: learnerResultText
+                            text: result*100 + "% Richtig"
+                            width: parent.width
+                            horizontalAlignment: Text.AlignHCenter
+                            font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                            color: "black"
+                        }
+                    }
+
+                    Row {
+                        width: parent.width
+                        height: parent.height * 3 / 10 - parent.spacing * 2 / 3
+                        spacing: 10
+
+                        MouseArea {
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            width:  parent.width / 2 - parent.spacing
+                            height: parent.height
+
+                            onClicked: {
+                                console.log("Choosing White Window")
+                                mode === "KanaVoicing" ? learnerResult.parent.switch_KanaVoicing() : learnerResult.parent.switch_VoicingKana()
+                            }
+
+                            Rectangle {
+                                anchors.fill: parent
+                                color: "#FFFFFF"
+
+                                Text {
+                                    text: "Again"
+                                    anchors.centerIn: parent
+                                    font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                                    color: "black"
+                                }
+                            }
+                        }
+
+                        MouseArea {
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
+                            width: parent.width / 2 - parent.spacing
+                            height: parent.height
+
+                            onClicked: {
+                                console.log("Choosing Black Window")
+                                learnerResult.parent.switchModeChooser()
+                            }
+
+                            Rectangle {
+                                anchors.fill: parent
+                                color: "#000000"
+
+                                Text {
+                                    text: "Menu"
+                                    anchors.centerIn: parent
+                                    font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
+                                    color: "white"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

modules/japanese/modules/KanaVoicing.qml

@@ -4,12 +4,18 @@ import "../../../colors"
 
 Item { // Kana_Try
     id: kanaVoicing
-    width: window.width
+    width: parent.width
-    height: window.height - head.height
+    height: parent.height
     anchors.margins: 15
     visible: false
 
-    Component.onCompleted: {
+    // Component.onCompleted: {
+    //     randomKnownKana()
+    // }
+
+    function start() {
+        kanaVoicingAnswer.focus = true
+        roundNum = 0
         randomKnownKana()
     }
 
@@ -23,10 +29,17 @@ Item { // Kana_Try
     property int correct: 0
     property int maxRoundNum: 10
 
+    property var pastKana: []
+    property var pastCorrectness: []
+
     function endRounds() {
+        kanaVoicingAnswer.focus = false
+        jLearnerScope.focus = true
         console.log("Switching back")
-        roundNum = 0
+        parent.switchResult(correct/maxRoundNum, "KanaVoicing", pastCorrectness)
-        parent.switchResult(correct/maxRoundNum)
+        pastKana = []
+        pastCorrectness = []
+        correct = 0
         kanaVoicingAnswer.placeholderText = "Type Voicing..."
         kanaVoicingAnswerBackground.color = kanaVoicingAnswer.activeFocus ? Colors.tertiary_fg : Colors.primary_fg
     }
@@ -37,6 +50,12 @@ Item { // Kana_Try
         }
         var list = kanaData.kana
         currentKana = list[Math.floor(Math.random() * list.length)]
+        if (knownList.length > maxRoundNum) {
+            while (pastKana.includes(currentKana)) {
+                currentKana = list[Math.floor(Math.random() * list.length)]
+            }
+        }
+        pastKana.push(currentKana)
         console.log("Round Num: " + roundNum + " - Choosing Kana: " + currentKana.hira)
         roundNum = roundNum + 1
     }
@@ -47,6 +66,12 @@ Item { // Kana_Try
         }
         var knownList = kanaData.kana.filter(k => k.known)
         currentKana = knownList[Math.floor(Math.random() * knownList.length)]
+        if (knownList.length > maxRoundNum) {
+            while (pastKana.includes(currentKana)) {
+                currentKana = knownList[Math.floor(Math.random() * knownList.length)]
+            }
+        }
+        pastKana.push(currentKana)
         console.log("Round Num: " + roundNum + " - Choosing Kana: " + currentKana.hira)
         roundNum = roundNum + 1
     }
@@ -58,45 +83,35 @@ Item { // Kana_Try
         Rectangle {
             id: kanaVoicingTextRectangale
             color: "#FFFFFF"
-            width: parent.width
+            width: kanaVoicingText.width + 20
-            height: kanaVoicingText.height + parent.spacing/2
+            height: parent.height * 0.1
+            anchors.horizontalCenter: parent.horizontalCenter
 
             Text {
                 id: kanaVoicingText
                 text: "Im Spiel - Runde: " + kanaVoicing.roundNum
-                width: parent.width
+                anchors.centerIn: parent
-                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: parent.height * 0.6
-                font.pixelSize: 28
                 color: "black"
             }
         }
 
-        Row {
-            width: parent.width
-            height: (parent.height - kanaVoicingTextRectangale.height)*0.8 - parent.spacing*2
-            spacing: 0
-
-            Rectangle {
-                color: "transparent"
-                width: (parent.width - kanaVoicingKanaRectangle.width)/2
-                height: parent.height
-            }
-
         Rectangle {
             id: kanaVoicingKanaRectangle
             color: "#000000"
-                width: parent.height
+            height: (parent.height - kanaVoicingTextRectangale.height)*0.75
-                height: parent.height
+            width: height
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenterOffset: -parent.height * 0.125
 
             Text {
                 id: kanaVoicingKana
-                    text: kanaVoicing.currentKana ? kanaVoicing.currentKana.hira : ""
+                text: typeof kanaVoicing.currentKana.hira === "undefined" ? "" : kanaVoicing.currentKana.hira
                 anchors.centerIn: parent
                 font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                 color: "white"
             }
         }
-        }
 
         TextField {
             id: kanaVoicingAnswer
@@ -105,8 +120,8 @@ Item { // Kana_Try
 
             anchors.horizontalCenter: parent.horizontalCenter
 
-            width: parent.width / 3
+            width: parent.width/2
-            height: (parent.height - kanaVoicingTextRectangale.height) * 0.2 - parent.spacing*2
+            height: (parent.height - kanaVoicingTextRectangale.height)*0.25 - parent.spacing*2
 
             font.pixelSize: height * 0.8
 
@@ -121,7 +136,7 @@ Item { // Kana_Try
                 border.width: 1
             }
 
-            Keys.onReleased: {
+            Keys.onReleased: function(event) {
                 if (event.key === Qt.Key_Escape) {
                     console.log("Escape pressed inside TextField")
                     console.log("Pressed Escape, closing JLearner")
@@ -137,15 +152,26 @@ Item { // Kana_Try
                     kanaVoicingAnswer.placeholderText = "[" + kanaVoicing.currentKana.voice + "]"
                     kanaVoicingAnswerBackground.color = "green"
                     kanaVoicing.correct = kanaVoicing.correct + 1
-                    randomKnownKana()
+                    pastCorrectness.push({
+                        kana: kanaVoicing.currentKana.hira,
+                        correctness: true,
+                        answer: kanaVoicingAnswer.text.toLowerCase(),
+                        correct: kanaVoicing.currentKana.voice.join("|")
+                    })
                 } else {
                     console.log("Wrong: [" + currentKana.voice + "]")
                     kanaVoicingAnswer.text = ""
                     kanaVoicingAnswerBackground.color = "red"
                     kanaVoicingAnswer.placeholderText = "[" + kanaVoicing.currentKana.voice + "]"
+                    pastCorrectness.push({
+                        kana: kanaVoicing.currentKana.hira,
+                        correctness: false,
+                        answer: kanaVoicingAnswer.text.toLowerCase(),
+                        correct: kanaVoicing.currentKana.voice.join("|")
+                    })
+                }
                 randomKnownKana()
             }
         }
     }
-    }
 }

modules/japanese/modules/ModeChooser.qml

@@ -4,14 +4,10 @@ import "../../../colors"
 
 Item { // Chooser
     id: languageChooser
-    width: window.width
+    width: parent.width
-    height: window.height * 0.9
+    height: parent.height
     anchors.margins: 15
-    visible: true
+    visible: false
-
-    function switch_KanaVoicing() {
-        parent.switch_KanaVoicing()
-    }
 
     Column {
         anchors.fill: parent
@@ -20,22 +16,22 @@ Item { // Chooser
         Rectangle {
             id: modeChooserUpperText
             color: "#FFFFFF"
-            width: parent.width
+            width: mainText.width + 20
-            height: mainText.height + parent.spacing/2
+            height: parent.height * 0.1
+            anchors.horizontalCenter: parent.horizontalCenter
 
             Text {
                 id: mainText
-                text: "Wähle ein Modus"
+                text: "Wähle ein Modus:"
-                width: parent.width
+                anchors.centerIn: parent
-                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: parent.height * 0.6
-                font.pixelSize: 28
                 color: "black"
             }
         }
 
         Row {
             width: parent.width
-            height: parent.height - modeChooserUpperText.height
+            height: parent.height - modeChooserUpperText.height - parent.spacing
             spacing: 10
 
             MouseArea {
@@ -46,7 +42,7 @@ Item { // Chooser
 
                 onClicked: {
                     console.log("Choosing White Window")
-                    languageChooser.switch_KanaVoicing()
+                    languageChooser.parent.switch_KanaVoicing()
                 }
 
                 Rectangle {
@@ -54,7 +50,7 @@ Item { // Chooser
                     color: "#FFFFFF"
 
                     Text {
-                        text: "Weiß"
+                        text: "Kana to Voicing"
                         anchors.centerIn: parent
                         font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                         color: "black"
@@ -70,7 +66,7 @@ Item { // Chooser
 
                 onClicked: {
                     console.log("Choosing Black Window")
-                    languageChooser.switch_KanaVoicing()
+                    languageChooser.parent.switch_VoicingKana()
                 }
 
                 Rectangle {
@@ -78,7 +74,7 @@ Item { // Chooser
                     color: "#000000"
 
                     Text {
-                        text: "Schwarz"
+                        text: "Voicing to Kana"
                         anchors.centerIn: parent
                         font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                         color: "white"

modules/japanese/modules/VoicingKana.qml

@@ -4,46 +4,121 @@ import "../../../colors"
 
 Item { // Kana_Try
     id: voicingKana
-    width: window.width
+    width: parent.width
-    height: window.height - head.height
+    height: parent.height
     anchors.margins: 15
     visible: false
 
-    Component.onCompleted: {
+    // Component.onCompleted: {
-        randomKnownKana()
+    //     randomKnownKana()
+    // }
+
+    function start() {
+        roundNum = 0
+        new_round()
     }
 
     KanaData {
         id: kanaData
     }
 
-    property var currentKana: []
-
     property int roundNum: 0
+    property int correct: 0
     property int maxRoundNum: 10
 
-    function randomKana() {
+    property var pastKana: []
-        if (roundNum >= maxRoundNum) {
+    property var pastCorrectness: []
-            console.log("Switching back")
+
-            roundNum = 0
+    property var kanaArray: createResults(6)
-            parent.switchModeChooser()
+    property var targetKana: kanaArray[Math.floor(Math.random() * kanaArray.length)]
+
+    function createResults(n) {
+        var arr = []
+        for (var i = 0; i < n; i++) {
+            arr.push({ hira: "あ", voice: ["a"], known: true })
         }
-        var list = kanaData.kana
+        return arr
-        currentKana = list[Math.floor(Math.random() * list.length)]
-        console.log("Round Num: " + roundNum + " - Choosing Kana: " + currentKana.hira)
-        roundNum = roundNum + 1
     }
 
-    function randomKnownKana() {
+    function new_round() {
-        if (roundNum >= maxRoundNum) {
+        roundNum = roundNum + 1
-            console.log("Switching back")
+        kanaArray = gemerateKanaArray()
-            roundNum = 0
+        targetKana = kanaArray[Math.floor(Math.random() * kanaArray.length)]
-            parent.switchModeChooser()
+        console.log("Round Num: " + roundNum + " - Choosing Kana: " + targetKana.hira)
+        pastKana.push(targetKana)
+    }
+
+    function gemerateKanaArray() {
+        var arr = []
+        for (var i = 0; i < 6; i++) {
+            arr.push(randomKnownKana(arr))
+        }
+        return arr
+    }
+
+    function randomKana(arr) {
+        if (roundNum > maxRoundNum) {
+            endRounds()
+        }
+        var list = kanaData.kana
+        var newKana = list[Math.floor(Math.random() * list.length)]
+        
+        var arrExists = Array.isArray(arr)
+
+        if (knownList.length > maxRoundNum + 6) {
+            if (arrExists) {
+                while (pastKana.includes(newKana) || arr.includes(newKana)) {
+                    newKana = list[Math.floor(Math.random() * list.length)]
+                }
+            } else{
+                while (pastKana.includes(newKana)){
+                    newKana = list[Math.floor(Math.random() * list.length)]
+                }
+            }
+        } else {
+            if (arrExists) {
+                while (arr.includes(newKana)) {
+                    newKana = list[Math.floor(Math.random() * list.length)]
+                }
+            }
+        }
+        kanaArray.push(newKana)
+        return newKana
+    }
+
+    function randomKnownKana(arr) {
+        if (roundNum > maxRoundNum) {
+            endRounds()
         }
         var knownList = kanaData.kana.filter(k => k.known)
-        currentKana = knownList[Math.floor(Math.random() * knownList.length)]
+        var newKana = knownList[Math.floor(Math.random() * knownList.length)]
-        console.log("Round Num: " + roundNum + " - Choosing Kana: " + currentKana.hira)
+        
-        roundNum = roundNum + 1
+        var arrExists = Array.isArray(arr)
+
+        if (knownList.length > maxRoundNum + 6) {
+            if (arrExists) {
+                while (pastKana.includes(newKana) || arr.includes(newKana)) {
+                    newKana = knownList[Math.floor(Math.random() * knownList.length)]
+                }
+            } else{
+                while (pastKana.includes(newKana)){
+                    newKana = knownList[Math.floor(Math.random() * knownList.length)]
+                }
+            }
+        } else {
+            if (arrExists) {
+                while (arr.includes(newKana)) {
+                    newKana = knownList[Math.floor(Math.random() * knownList.length)]
+                }
+            }
+        }
+        return newKana
+    }
+
+    function endRounds() {
+        console.log("Switching back")
+        roundNum = 0
+        parent.switchResult(correct/maxRoundNum, "VoicingKana", pastCorrectness)
     }
 
     Column {
@@ -53,71 +128,97 @@ Item { // Kana_Try
         Rectangle {
             id: voicingKanaTextRectangale
             color: "#FFFFFF"
-            width: parent.width
+            width: mainText.width + 20
-            height: voicingKanaText.height + parent.spacing/2
+            height: parent.height * 0.1
+            anchors.horizontalCenter: parent.horizontalCenter
 
             Text {
-                id: voicingKanaText
+                id: mainText
-                text: "Im Spiel - Runde: " + voicingKana.roundNum
+                text: "Runde: " + roundNum + " - [" + targetKana.voice.join("|") + "]:"
-                width: parent.width
+                anchors.centerIn: parent
-                horizontalAlignment: Text.AlignHCenter
+                font.pixelSize: parent.height * 0.6
-                font.pixelSize: 28
                 color: "black"
             }
         }
 
-        Row {
+        Rectangle{
             width: parent.width
-            height: parent.height - voicingKanaTextRectangale.height - parent.spacing
+            height: parent.height - voicingKanaTextRectangale.height - voicingKanaResultRectangale.height - parent.spacing * 2
-            spacing: 15
+            color: "transparent"
+            Grid {
+                id: grid
+                anchors.fill: parent
+                columns: 3
+                spacing: 10
 
+                property int rows: 2
+
+                // calculate cell width and height based on parent size, spacing, and number of columns/rows
+                property real cellWidth: (width - (columns - 1) * spacing) / columns
+                property real cellHeight: (height - (rows - 1) * spacing) / rows
+
+                Repeater {
+                    model: kanaArray
                     MouseArea {
                         hoverEnabled: true
                         cursorShape: Qt.PointingHandCursor
-                width: (parent.width - parent.spacing) / 2
+                        width:  grid.cellWidth
-                height: parent.height
+                        height: grid.cellHeight
 
                         onClicked: {
-                    voicingKana.randomKnownKana()
+                            console.log("Choose a Kana: " + modelData.hira)
+                            if (modelData.hira === targetKana.hira) {
+                                console.log("Correct")
+                                correct = correct + 1
+                                voicingKanaResult.color = "green"
+                            } else {
+                                console.log("Wrong: [" + targetKana.hira + "]")
+                                voicingKanaResult.color = "red"
+                            }
+                            pastCorrectness.push({
+                                kana: targetKana.hira,
+                                correctness: modelData.hira === targetKana.hira,
+                                answer: modelData.hira,
+                                correct: targetKana.voice.join("|")
+                            })
+                            voicingKanaResult.text = "Letzte Runde: " + targetKana.hira + ": " + "[" + targetKana.voice.join("|") + "]"
+                            new_round()
                         }
 
                         Rectangle {
-                    anchors.fill: parent
+                            width: parent.width
-                    color: "#FFFFFF"
-
-                    Text {
-                        id: voicingKanaKana1
-                        text: voicingKana.currentKana ? voicingKana.currentKana.hira : ""
-                        anchors.centerIn: parent
-                        font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
-                        color: "black"
-                    }
-                }
-            }
-
-            MouseArea {
-                hoverEnabled: true
-                cursorShape: Qt.PointingHandCursor
-                width: (parent.width - parent.spacing) / 2
                             height: parent.height
-
-                onClicked: {
-                    voicingKana.randomKnownKana()
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    color: "#000000"
-
-                    Text {
-                        id: voicingKanaKana2
-                        text: voicingKana.currentKana ? voicingKana.currentKana.hira : ""
-                        anchors.centerIn: parent
-                        font.pixelSize: Math.min(parent.width / text.length * 1.2, parent.height * 0.8)
                             color: "white"
+                            border.width: 1
+                            radius: 4
+
+                            Text{
+                                text: modelData.hira
+                                anchors.centerIn: parent
+                                anchors.verticalCenterOffset: -parent.height * 0.1
+                                font.pixelSize: parent.height * 0.8
+                                color: "black"
                             }
                         }
                     }
                 }
             }
+        }
+
+        Rectangle {
+            id: voicingKanaResultRectangale
+            color: "#FFFFFF"
+            width: voicingKanaResult.width + 20
+            height: parent.height * 0.1
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            Text {
+                id: voicingKanaResult
+                text: "Wähle das richtige Zeichen"
+                anchors.centerIn: parent
+                font.pixelSize: parent.height * 0.6
+                color: "black"
+            }
+        }
+    }
 }