Skip to content

Commit c0fed28

Browse files
edeustaceedeustace
committed
feat(outcome-info): add new outcome-info element, to show outcome
1 parent d3e2c8b commit c0fed28

File tree

6 files changed

+242
-123
lines changed

6 files changed

+242
-123
lines changed

‎.prettierrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// .prettierrc.js
2+
module.exports = {
3+
singleQuote: true
4+
};

‎demo/demo-element/index.js

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default class DemoElement extends HTMLElement {
1313
this._$prompt = this.querySelector('#prompt');
1414
this._$input = this.querySelector('input');
1515

16-
this._$input.addEventListener('input', (e) => {
16+
this._$input.addEventListener('input', e => {
1717
this._session.answer = e.target.value;
1818
});
1919

@@ -34,16 +34,15 @@ export default class DemoElement extends HTMLElement {
3434
if (m.correctResponse) {
3535
this._$feedback.textContent = m.correctResponse;
3636
} else {
37-
3837
this._$feedback.textContent = '';
3938
}
4039

4140
if (m.correct === true) {
42-
this._$feedback.setAttribute('style', "color: green;");
41+
this._$feedback.setAttribute('style', 'color: green;');
4342
} else if (m.correct === false) {
44-
this._$feedback.setAttribute('style', "color: red;");
43+
this._$feedback.setAttribute('style', 'color: red;');
4544
} else {
46-
this._$feedback.setAttribute('style', "color: auto");
45+
this._$feedback.setAttribute('style', 'color: auto');
4746
}
4847
}
4948

@@ -67,14 +66,15 @@ export class Config extends HTMLElement {
6766

6867
let detail = {
6968
update: this._model
70-
}
69+
};
7170

72-
this.dispatchEvent(new CustomEvent('model.updated', { bubbles: true, detail }))
71+
this.dispatchEvent(
72+
new CustomEvent('model.updated', { bubbles: true, detail })
73+
);
7374
});
7475
return input;
7576
}
7677

77-
7878
connectedCallback() {
7979
this.innerHTML = `
8080
<div class="config-pane">
@@ -87,15 +87,15 @@ export class Config extends HTMLElement {
8787
</div>
8888
`;
8989

90-
this._$prompt = this._initInput('prompt', (v) => {
90+
this._$prompt = this._initInput('prompt', v => {
9191
this._model.prompt = v;
9292
});
9393

94-
this._$placeholder = this._initInput('placeholder', (v) => {
94+
this._$placeholder = this._initInput('placeholder', v => {
9595
this._model.placeholder = v;
9696
});
9797

98-
this._$correctResponse = this._initInput('correctResponse', (v) => {
98+
this._$correctResponse = this._initInput('correctResponse', v => {
9999
this._model.correctResponse = v;
100100
});
101101
}
@@ -108,20 +108,24 @@ export class Config extends HTMLElement {
108108
}
109109

110110
export function model(question, session, env) {
111-
112111
let evaluateMode = env.mode === 'evaluate';
113112

114-
let out = _.extend({}, {
115-
prompt: question.prompt,
116-
placeholder: question.placeholder,
117-
correct: evaluateMode && session.answer === question.correctResponse,
118-
disabled: env.mode !== 'gather',
119-
mode: env.mode,
120-
correctResponse: evaluateMode && question.correctResponse
121-
});
113+
let out = _.extend(
114+
{},
115+
{
116+
prompt: question.prompt,
117+
placeholder: question.placeholder,
118+
correct: evaluateMode && session.answer === question.correctResponse,
119+
disabled: env.mode !== 'gather',
120+
mode: env.mode,
121+
correctResponse: evaluateMode && question.correctResponse
122+
}
123+
);
122124
return Promise.resolve(out);
123125
}
124126

125127
export function outcome(question, session, env) {
126-
return Promise.resolve({ score: { scaled: {} } });
127-
}
128+
return new Promise(resolve => {
129+
resolve({ score: 1.0 });
130+
});
131+
}

‎src/bootstrap/repo.js

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,60 @@
11
import { defineCommonElements } from './common';
22

3-
//logic next
4-
export const logic = require.ensure([], () => {
5-
6-
require('material-elements/src/select-field');
7-
8-
const MarkdownElement = require('../markdown-element').default;
9-
customElements.define('markdown-element', MarkdownElement);
10-
11-
const CatalogEntry = require('../catalog-entry').default;
12-
customElements.define('catalog-entry', CatalogEntry);
13-
14-
const { default: DependenciesPanel, DependencyEl } = require('../dependencies-panel');
15-
customElements.define('dependencies-panel', DependenciesPanel);
16-
customElements.define('dependency-el', DependencyEl);
17-
18-
const { default: InfoPanel, GithubInfoCount } = require('../info-panel');
19-
customElements.define('info-panel', InfoPanel);
20-
customElements.define('github-info-count', GithubInfoCount);
21-
22-
const ctabs = require('../c-tabs');
23-
customElements.define('c-tabs', ctabs.CTabs);
24-
customElements.define('c-tab', ctabs.CTab);
25-
customElements.define('c-tab-title', ctabs.CTabTitle);
26-
27-
const { default: CatalogDemo } = require('../catalog-demo');
28-
customElements.define('catalog-demo', CatalogDemo);
29-
const { default: DemoPane } = require('../catalog-demo/demo-pane');
30-
customElements.define('demo-pane', DemoPane);
31-
const { default: ControlPanel } = require('../catalog-demo/control-panel');
32-
customElements.define('control-panel', ControlPanel);
33-
const { default: ItemPreview } = require('../catalog-demo/item-preview');
34-
customElements.define('item-preview', ItemPreview);
35-
const { default: ConfigurationPanes, ConfigurationPane, JsonConfiguration } = require('../catalog-demo/configuration-panes');
36-
customElements.define('configuration-panes', ConfigurationPanes);
37-
customElements.define('configuration-pane', ConfigurationPane);
38-
customElements.define('json-configuration', JsonConfiguration);
39-
40-
})
3+
//logic next
4+
export const logic = require
5+
.ensure([], () => {
6+
require('material-elements/src/select-field');
7+
8+
const MarkdownElement = require('../markdown-element').default;
9+
customElements.define('markdown-element', MarkdownElement);
10+
11+
const CatalogEntry = require('../catalog-entry').default;
12+
customElements.define('catalog-entry', CatalogEntry);
13+
14+
const {
15+
default: DependenciesPanel,
16+
DependencyEl
17+
} = require('../dependencies-panel');
18+
customElements.define('dependencies-panel', DependenciesPanel);
19+
customElements.define('dependency-el', DependencyEl);
20+
21+
const { default: InfoPanel, GithubInfoCount } = require('../info-panel');
22+
customElements.define('info-panel', InfoPanel);
23+
customElements.define('github-info-count', GithubInfoCount);
24+
25+
const ctabs = require('../c-tabs');
26+
customElements.define('c-tabs', ctabs.CTabs);
27+
customElements.define('c-tab', ctabs.CTab);
28+
customElements.define('c-tab-title', ctabs.CTabTitle);
29+
30+
const { default: CatalogDemo } = require('../catalog-demo');
31+
customElements.define('catalog-demo', CatalogDemo);
32+
const { default: DemoPane } = require('../catalog-demo/demo-pane');
33+
customElements.define('demo-pane', DemoPane);
34+
const { default: ControlPanel } = require('../catalog-demo/control-panel');
35+
customElements.define('control-panel', ControlPanel);
36+
const { default: OutcomeInfo } = require('../catalog-demo/outcome-info');
37+
customElements.define('outcome-info', OutcomeInfo);
38+
const { default: ItemPreview } = require('../catalog-demo/item-preview');
39+
customElements.define('item-preview', ItemPreview);
40+
const {
41+
default: ConfigurationPanes,
42+
ConfigurationPane,
43+
JsonConfiguration
44+
} = require('../catalog-demo/configuration-panes');
45+
customElements.define('configuration-panes', ConfigurationPanes);
46+
customElements.define('configuration-pane', ConfigurationPane);
47+
customElements.define('json-configuration', JsonConfiguration);
48+
})
4149
.then(() => {
4250
console.log('logic loaded');
4351
});
4452

45-
let repoElements = [
46-
'catalog-entry',
47-
'catalog-demo'
48-
];
49-
53+
let repoElements = ['catalog-entry', 'catalog-demo'];
5054

5155
//This will happen at the end
5256
export const defineRepoElements = () => {
5357
const elementPromises = repoElements.map(e => customElements.whenDefined(e));
5458
const promises = [defineCommonElements()].concat(elementPromises);
5559
return Promise.all(promises);
56-
}
60+
};

‎src/catalog-demo/control-panel.js

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ const templateHTML = `
66
padding-bottom: 6px;
77
--select-field-font-family: 'Droid Sans', sans-serif;
88
--select-option-selected-color: var(--pie-brand-hover-color);
9-
margin-bottom: 10px;
10-
${boxShadow}
11-
padding: 18px;
12-
background-color: #f3f3f3;
9+
margin-bottom: 0px;
10+
padding-top: 8px;
11+
padding-bottom: 8px;
12+
background-color: var(--catalog-header-bg, rgba(0, 50, 49, 0.9));
1313
}
1414
1515
#control-panel{
@@ -20,8 +20,6 @@ const templateHTML = `
2020
2121
</style>
2222
23-
<span id="control-panel">control panel</span>
24-
2523
<select-field id="mode" placeholder="mode">
2624
<select-option value="gather" selected>gather</select-option>
2725
<select-option value="view">view</select-option>
@@ -56,9 +54,13 @@ export default class ControlPanel extends HTMLElement {
5654
}
5755

5856
_addLangsSelectField() {
59-
let options = this._langs.map(l => `<select-option
57+
let options = this._langs
58+
.map(
59+
l => `<select-option
6060
value="${l}"
61-
${l === 'en-US' ? 'selected' : ''}>${l}</select-option>`).join(' ');
61+
${l === 'en-US' ? 'selected' : ''}>${l}</select-option>`
62+
)
63+
.join(' ');
6264

6365
this.shadowRoot.querySelector('#langs-holder').innerHTML = `
6466
<select-field placeholder="locale" id="langs">${options}</select-field>
@@ -70,7 +72,6 @@ export default class ControlPanel extends HTMLElement {
7072
}
7173

7274
_updateEnv(path, value) {
73-
7475
if (!this._env) {
7576
return;
7677
}
@@ -84,27 +85,30 @@ export default class ControlPanel extends HTMLElement {
8485
}
8586

8687
_dispatchEnvChanged() {
87-
this.dispatchEvent(new CustomEvent('env-changed', {
88-
bubbles: true,
89-
composed: true,
90-
detail: {
91-
env: this._env
92-
}
93-
}));
88+
this.dispatchEvent(
89+
new CustomEvent('env-changed', {
90+
bubbles: true,
91+
composed: true,
92+
detail: {
93+
env: this._env
94+
}
95+
})
96+
);
9497
}
9598

9699
connectedCallback() {
97-
98100
this.shadowRoot.querySelector('#mode').addEventListener('change', e => {
99101
this._updateEnv('mode', e.detail.value);
100102
});
101103

102-
this.shadowRoot.querySelector('#color-contrast').addEventListener('change', e => {
103-
if (this._env) {
104-
this._env.accessibility = this._env.accessibility || {};
105-
this._env.accessibility.colorContrast = e.detail.value;
106-
this._dispatchEnvChanged();
107-
}
108-
});
104+
this.shadowRoot
105+
.querySelector('#color-contrast')
106+
.addEventListener('change', e => {
107+
if (this._env) {
108+
this._env.accessibility = this._env.accessibility || {};
109+
this._env.accessibility.colorContrast = e.detail.value;
110+
this._dispatchEnvChanged();
111+
}
112+
});
109113
}
110-
}
114+
}

0 commit comments

Comments
 (0)