pa/homework-vocabulary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added icons for result checking

Browse Source
This commit is contained in:
P-A
2026-02-05 21:28:40 +01:00
parent 22dff8705d
commit 93b69aefc9
9 changed files with 113 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
css/styles.css
View File

@@ -90,6 +90,24 @@ homework-vocabulary-task > input {
width: 40%;
}
homework-vocabulary-task > #images {
display: flex;
flex-flow: row nowrap;
}
homework-vocabulary-task > img {
height: 1.1em;
width: 1.1em;
}
homework-vocabulary-task > img.disabled {
display: none;
}
img#delete {
margin-left: 0;
margin-right: .3em;
}
#page-header {
display: flex;
justify-content: space-between;

41
images/StatusConfirmed.svg Normal file
View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="32" height="32" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<defs>
</defs>
<linearGradient id="XMLID_130_" gradientUnits="userSpaceOnUse" x1="124.4995" y1="-78.9331" x2="124.4995" y2="255.2256">
<stop offset="0.1685" style="stop-color:#99FF66"/>
<stop offset="0.4775" style="stop-color:#33CC33"/>
<stop offset="0.7416" style="stop-color:#009900"/>
<stop offset="0.9213" style="stop-color:#007E00"/>
</linearGradient>
<circle fill="url(#XMLID_130_)" cx="124.5" cy="124.5" r="124.5"/>
<linearGradient id="XMLID_131_" gradientUnits="userSpaceOnUse" x1="124.3726" y1="-41.5879" x2="124.3725" y2="283.6124">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.5955" style="stop-color:#33CC33"/>
<stop offset="0.8652" style="stop-color:#009900"/>
</linearGradient>
<circle fill="url(#XMLID_131_)" cx="124.373" cy="124.5" r="119.867"/>
<linearGradient id="XMLID_132_" gradientUnits="userSpaceOnUse" x1="124.3726" y1="-18.6924" x2="124.3725" y2="307.0072">
<stop offset="0.0056" style="stop-color:#99FF66"/>
<stop offset="0.9213" style="stop-color:#33CC33"/>
</linearGradient>
<path fill="url(#XMLID_132_)" d="M123.258,93.861c44.55,0,111.561,21.233,119.616,48.791c0.898-5.92,1.366-11.98,1.366-18.152
c0-66.201-53.666-119.867-119.867-119.867S4.505,58.299,4.505,124.5c0,4.661,0.275,9.257,0.793,13.779
C17.139,112.88,82.153,93.861,123.258,93.861z"/>
<path fill="#FFFFFF" stroke="#009900" stroke-width="6" d="M223.399,73.255l-14.821-14.821c-4.038-4.038-10.585-4.038-14.623,0
l-78.842,78.842L70.749,92.359c-4.039-4.038-10.585-4.038-14.624-0.001L41.304,107.18c-4.038,4.038-4.038,10.584,0,14.624
l50.885,51.52c0.222,0.271,0.458,0.534,0.712,0.787l5.4,5.399l9.438,9.557c4.038,4.038,10.585,4.038,14.624,0l14.821-14.821
c0.338-0.338,0.637-0.698,0.917-1.067l85.299-85.3C227.438,83.84,227.438,77.293,223.399,73.255z"/>
<path opacity="0.59" fill="#FFFFFF" d="M124.373,17.928c48.397,0,90.182,28.296,109.723,69.244
c-15.687-45.51-58.884-78.209-109.723-78.209S30.336,41.662,14.65,87.172C34.191,46.224,75.976,17.928,124.373,17.928z"/>
<path opacity="0.26" fill="#860000" d="M124.372,230.611c-48.397,0-90.182-28.295-109.722-69.243
c15.686,45.511,58.883,78.208,109.722,78.208c50.839,0,94.036-32.697,109.724-78.208
C214.554,202.316,172.77,230.611,124.372,230.611z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

44
images/StatusNegative.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.1, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
<!ENTITY ns_svg "http://www.w3.org/2000/svg">
<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
width="32" height="32" viewBox="-0.016 0 251 250" enable-background="new -0.016 0 251 250" xml:space="preserve">
<defs>
</defs>
<linearGradient id="XMLID_21_" gradientUnits="userSpaceOnUse" x1="124.9995" y1="-79.25" x2="124.9995" y2="256.2507">
<stop offset="0.1685" style="stop-color:#FF6666"/>
<stop offset="0.4775" style="stop-color:#FF0000"/>
<stop offset="0.7416" style="stop-color:#CF0000"/>
<stop offset="0.9213" style="stop-color:#AC0000"/>
</linearGradient>
<circle fill="url(#XMLID_21_)" cx="125" cy="125" r="125"/>
<linearGradient id="XMLID_22_" gradientUnits="userSpaceOnUse" x1="124.8716" y1="-41.7554" x2="124.8716" y2="284.7511">
<stop offset="0" style="stop-color:#FF0000"/>
<stop offset="0.4944" style="stop-color:#FF0000"/>
<stop offset="0.8652" style="stop-color:#C20000"/>
</linearGradient>
<circle fill="url(#XMLID_22_)" cx="124.872" cy="125" r="120.349"/>
<linearGradient id="XMLID_23_" gradientUnits="userSpaceOnUse" x1="124.8716" y1="4.6514" x2="124.8716" y2="143.2261">
<stop offset="0.0056" style="stop-color:#FFCBCB"/>
<stop offset="0.8034" style="stop-color:#FF3939"/>
</linearGradient>
<path fill="url(#XMLID_23_)" d="M123.753,94.238c44.729,0,112.009,21.318,120.096,48.987c0.903-5.944,1.372-12.03,1.372-18.226
c0-66.467-53.881-120.349-120.348-120.349S4.523,58.533,4.523,125c0,4.68,0.276,9.294,0.796,13.834
C17.207,113.333,82.482,94.238,123.753,94.238z"/>
<path opacity="0.59" fill="#FFFFFF" d="M126.372,18c48.592,0,90.544,28.41,110.163,69.523C220.786,41.829,177.416,9,126.372,9
C75.329,9,31.958,41.829,16.209,87.523C35.829,46.41,77.781,18,126.372,18z"/>
<linearGradient id="XMLID_24_" gradientUnits="userSpaceOnUse" x1="-1457.4448" y1="-1286.522" x2="-1457.4448" y2="-1098.3445" gradientTransform="matrix(0.7071 0.7071 -0.7071 0.7071 327.2396 1984.5758)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.9944" style="stop-color:#EFEFEF"/>
</linearGradient>
<path fill="url(#XMLID_24_)" stroke="#993300" stroke-width="6" d="M103.995,146.702H52c-5.864,0-10.618-4.754-10.618-10.618
v-21.523c0-5.864,4.753-10.617,10.618-10.617h51.994h42.759h51.994c5.864,0,10.617,4.754,10.617,10.617v21.524
c0,5.863-4.753,10.617-10.617,10.617h-51.994H103.995z"/>
<path opacity="0.26" fill="#860000" d="M124.75,231.509c-48.591,0-90.543-28.409-110.163-69.523
c15.749,45.693,59.12,78.522,110.163,78.522c51.044,0,94.414-32.829,110.163-78.522C215.293,203.1,173.341,231.509,124.75,231.509z"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

1
images/check-circle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 581 B

1
images/check.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 360 B

1
images/times-circle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 548 B

1
images/times.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

1
javascript/homeworkPage.js
View File

@@ -81,7 +81,6 @@ class HomeworkPage extends HomeworkElement {
if(this.type == HomeworkTypes.VOCABULARY_ENGLISH) {
const row = new HomeworkVocabularyTask()
this.content.append(row)
console.log("New row in page")
}
}

8
javascript/homeworkVocabularyTask.js
View File

@@ -5,12 +5,16 @@ class HomeworkVocabularyTask extends HomeworkElement {
`
<input type="text" class="source-language" id="source">
<input type="text" class="target-language" id="target">
<div></div>
<img src="/images/times.svg" id="delete">
<img src="/images/check-circle.svg" class="disabled">
<img src="/images/times-circle.svg" class="disabled">
`
this.setAttribute("result", "unknown")
this.setAttribute("state", "edit")
}
connectedCallback() {
console.log("New task")
console.log("New task added to page")
}
}
customElements.define('homework-vocabulary-task', HomeworkVocabularyTask)