Introduced training session

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="target-language" id="target">
+      <input type="text" class="source-language" name="source-language">
+      <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/times-circle.svg" class="disabled">
+      <img src="/images/check-circle.svg" class="disabled" id="correct">
+      <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.targetText = this.querySelector("input#target")
+    this.sourceInput = this.querySelector("input.source-language")
+    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)