Introduced training session

css/styles.css

@@ -105,10 +105,26 @@ homework-vocabulary-task > img#delete:active {
 	box-shadow: 0 0 3px 2px #707070;
 }
 
-homework-vocabulary-task > img.disabled {
+homework-vocabulary-task[result="unknown"] > img.disabled {
 	display: none;
 }
 
+homework-vocabulary-task[result="correct"] > img#correct, homework-vocabulary-task[result="incorrect"] > img#incorrect  {
+	display: block;
+}
+
+homework-vocabulary-task[result="correct"] > img#incorrect, homework-vocabulary-task[result="incorrect"] > img#correct {
+	display: none;
+}
+
+homework-vocabulary-task[result="correct"] > input.target-language {
+	background-color: lightgreen; 
+}
+
+homework-vocabulary-task[result="incorrect"] > input.target-language {
+	background-color: lightcoral;
+}
+
 img#delete {
 	margin-left: 0;
 	margin-right: .3em;

javascript/homeworkPage.js

@@ -85,9 +85,7 @@ class HomeworkPage extends HomeworkElement {
       const response = await fetch(dataFile)
       const data = await response.json()
       data.items.forEach((item) => {
-        const row = new HomeworkVocabularyTask(crypto.randomUUID())
+        const row = new HomeworkVocabularyTask(crypto.randomUUID(), item.source, item.target)
-        row.setSourceText(item.source)
-        row.setTargetText(item.target)
         this.content.append(row)
       })
       console.log(data.items)
@@ -106,6 +104,10 @@ class HomeworkPage extends HomeworkElement {
 
     trainVocabulary() {
       console.log("Train!!")
+      const tasks = this.content.querySelectorAll("homework-vocabulary-task")
+      tasks.forEach((task) => {
+        task.state = "train"
+      })
     }
 
     clearAllVocabularies() {
@@ -127,7 +129,6 @@ class HomeworkPage extends HomeworkElement {
           }
         })
       }
-
     }
 }
 customElements.define('homework-page', HomeworkPage)

javascript/homeworkVocabularyTask.js

@@ -1,27 +1,63 @@
 class HomeworkVocabularyTask extends HomeworkElement {
-	constructor (id) {
+	constructor (id, source, target) {
     super()
     this.innerHTML =
     `
-      <input type="text" class="source-language" id="source">
+      <input type="text" class="source-language" name="source-language">
-      <input type="text" class="target-language" id="target">
+      <input type="text" class="target-language" name="target-language">
       <img src="/images/times.svg" id="delete">
-      <img src="/images/check-circle.svg" class="disabled">
+      <img src="/images/check-circle.svg" class="disabled" id="correct">
-      <img src="/images/times-circle.svg" class="disabled">
+      <img src="/images/times-circle.svg" class="disabled" id="incorrect">
     `
     this.id = id
+    this.sourceText = source
+    this.targetText = target
+    console.log(this.targetText)
     this.setAttribute("result", "unknown")
     this.setAttribute("state", "edit")
     this.deleteButton = this.querySelector('img#delete')
     this.deleteButton.addEventListener("click", this.deleteTask.bind(this))
-    this.sourceText = this.querySelector("input#source")
+    this.sourceInput = this.querySelector("input.source-language")
-    this.targetText = this.querySelector("input#target")
+    this.sourceInput.value = this.sourceText
+    this.targetInput = this.querySelector("input.target-language")
+    this.targetInput.value = this.targetText
+    this.targetInput.addEventListener("keypress", this.evaluate.bind(this))
   }
 
   connectedCallback() {
     console.log("New task added to page")
   }
 
+  static get observedAttributes () { 
+      return [ "result", "state" ] 
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch(name) {
+      case "result":
+        console.log("Result changed")
+        break
+      case "state":
+        console.log("State changed")
+        break
+      default:
+        console.log("Unhandled attribute: '" + name + "'")
+    }
+  }
+
+  get state () {
+    return this.getAttribute("state")
+  }
+
+  set state (state) {
+    this.setAttribute("state", "train")
+    this.targetInput.value = ""
+  }
+
+  setFocus() {
+    this.targetInput.focus()
+  }
+
   deleteTask() {
     console.log("Delete line")
     this.dispatchEvent(new CustomEvent("delete", {detail:{id: this.id}, bubbles: true, cancelable: true}))
@@ -32,11 +68,27 @@ class HomeworkVocabularyTask extends HomeworkElement {
   }
 
   setSourceText(text) {
-    this.sourceText.value = text
+    this.sourceInput.value = text
   }
 
   setTargetText(text) {
-    this.targetText.value = text
+    this.targetInput.value = text
+  }
+
+  evaluate(event) {
+    if(this.state === "train" && event.key === "Enter") {
+      console.log("Evaluating '" + this.targetText + "' against entered '" + this.targetInput.value + "'")
+      if(this.targetInput.value == this.targetText) {
+        console.log("Correct")
+        this.setAttribute("result", "correct")
+      } else {
+        console.log("Not correct")
+        this.setAttribute("result", "incorrect")
+      }
+      if(this.nextElementSibling != null) {
+        this.nextElementSibling.setFocus()
+      }
+    }
   }
 }
 customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)

resources/homework.json

@@ -17,8 +17,8 @@
       "target": "daughter"
     },
     {
-      "source": "talk on the telephone",
+      "source": "tala i telefonen",
-      "target": "tala i telefonen"
+      "target": "talk on the telephone"
     },
     {
       "source": "intresserade av",

resources/sv_SE.json

@@ -36,5 +36,5 @@
     "text035": "Ny...",
     "text036": "Träna",
     "text037": "Spara",
-    "text038": "Radera alla"
+    "text038": "Rensa"
 }