Skip to content

Commit

Permalink
Adds scrolling and similarity score
Browse files Browse the repository at this point in the history
  • Loading branch information
@MinThaMie
MinThaMie committed Aug 29, 2024
1 parent 35f2eb7 commit 12d44d8
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 90 deletions.
25 changes: 25 additions & 0 deletions app/controllers/trusted-ten.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class TrustedTenController extends Controller {
@tracked similarityScore = 0;
@tracked amountOfCheckboxes = 0;
name = '';

@action
clickCheckBox(e) {
this.similarityScore += e.target.checked ? 1 : -1;
}

@action
updatePeople() {
let amountOfPeople = 0;
document.querySelectorAll('input[type=input]').forEach((i) => {
if (i.value !== '') {
amountOfPeople++;
}
});
this.amountOfCheckboxes = amountOfPeople * 7;
}
}
8 changes: 7 additions & 1 deletion app/styles/ten.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.ten-grid {
max-width: 860px;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-columns: repeat(8, minmax(90px, 1fr));
grid-template-rows: 56px repeat(10, 28px);
gap: 8px;
}
Expand All @@ -11,6 +11,12 @@
vertical-align: bottom;
}

@media screen and (width < 1000px) {
.ten-grid {
overflow-x: scroll;
}
}

input[type="checkbox"] {
appearance: none;
cursor: pointer;
Expand Down
179 changes: 90 additions & 89 deletions app/templates/trusted-ten.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{{page-title (t "ten.pagetitle")}}
<Callout @subtitle={{t "ten.subtitle"}}>{{t "ten.title"}}</Callout>
<p class="intro">{{t "ten.intro" htmlSafe=true}}</p>

<div class="ten-grid">
<p id="name">{{t "ten.name"}}</p>
<p>{{t "ten.gender"}}</p>
Expand All @@ -11,104 +10,106 @@
<p>{{t "ten.ed"}}</p>
<p>{{t "ten.language"}}</p>
<p>{{t "ten.relation"}}</p>
<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>

<input aria-label={{t "ten.name"}} type="input"/>
<input aria-label={{t "ten.gender"}} type="checkbox"/>
<input aria-label={{t "ten.race"}} type="checkbox"/>
<input aria-label={{t "ten.age"}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} type="checkbox"/>
<input aria-label={{t "ten.language"}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} type="checkbox"/>
<input aria-label={{t "ten.name"}} {{on 'focusout' this.updatePeople}}type="input"/>
<input aria-label={{t "ten.gender"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.race"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.age"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.sex"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.ed"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.language"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
<input aria-label={{t "ten.relation"}} {{on 'click' this.clickCheckBox}} type="checkbox"/>
</div>
<h2 class="cards-title">{{t "ten.reflection"}}</h2>
<p>Similarity score: {{this.similarityScore}}
/{{this.amountOfCheckboxes}}</p>
<p class="intro">{{t "ten.reflection-text" htmlSafe=true}}</p>
12 changes: 12 additions & 0 deletions tests/unit/controllers/trusted-ten-test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { module, test } from 'qunit';
import { setupTest } from 'dei-bingo/tests/helpers';

module('Unit | Controller | trusted-ten', function (hooks) {
setupTest(hooks);

// TODO: Replace this with your real tests.
test('it exists', function (assert) {
let controller = this.owner.lookup('controller:trusted-ten');
assert.ok(controller);
});
});

0 comments on commit 12d44d8

Please sign in to comment.