diff --git a/css/styles.css b/css/styles.css
index 4e78feb..ff60783 100644
--- a/css/styles.css
+++ b/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;
diff --git a/javascript/homeworkPage.js b/javascript/homeworkPage.js
index ca2e4d2..0a31bc0 100644
--- a/javascript/homeworkPage.js
+++ b/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())
- row.setSourceText(item.source)
- row.setTargetText(item.target)
+ const row = new HomeworkVocabularyTask(crypto.randomUUID(), item.source, 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)
\ No newline at end of file
diff --git a/javascript/homeworkVocabularyTask.js b/javascript/homeworkVocabularyTask.js
index 977af97..32a1ccf 100644
--- a/javascript/homeworkVocabularyTask.js
+++ b/javascript/homeworkVocabularyTask.js
@@ -1,27 +1,63 @@
class HomeworkVocabularyTask extends HomeworkElement {
- constructor (id) {
+ constructor (id, source, target) {
super()
this.innerHTML =
`
-
-
+
+
-
-
+
+
`
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)
\ No newline at end of file
diff --git a/resources/sv_SE.json b/resources/sv_SE.json
index 5eb008d..8addc21 100644
--- a/resources/sv_SE.json
+++ b/resources/sv_SE.json
@@ -36,5 +36,5 @@
"text035": "Ny...",
"text036": "Träna",
"text037": "Spara",
- "text038": "Radera alla"
+ "text038": "Rensa"
}
\ No newline at end of file