@pie-element/multiple-choice 11.1.0 → 11.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/configure/CHANGELOG.md +11 -0
- package/configure/package.json +4 -4
- package/controller/CHANGELOG.md +11 -0
- package/controller/package.json +2 -2
- package/lib/choice.js +3 -2
- package/lib/choice.js.map +1 -1
- package/lib/main.js +1 -8
- package/lib/main.js.map +1 -1
- package/lib/multiple-choice.js +13 -6
- package/lib/multiple-choice.js.map +1 -1
- package/lib/print.js +2 -1
- package/lib/print.js.map +1 -1
- package/module/configure.js +1 -0
- package/module/controller.js +3472 -0
- package/module/demo.js +86 -0
- package/module/element.js +1 -0
- package/module/index.html +21 -0
- package/module/manifest.json +10 -0
- package/module/print-demo.js +124 -0
- package/module/print.html +18 -0
- package/module/print.js +1 -0
- package/package.json +6 -6
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>@pie-element/multiple-choice@11.1.0</title>
|
|
6
|
+
<script
|
|
7
|
+
type="module"
|
|
8
|
+
src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
|
|
9
|
+
|
|
10
|
+
<link
|
|
11
|
+
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
|
12
|
+
rel="stylesheet"
|
|
13
|
+
/>
|
|
14
|
+
<style>
|
|
15
|
+
html, body {
|
|
16
|
+
font-family: 'Roboto', sans-serif;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
<script type="module" src="./demo.js"></script>
|
|
20
|
+
</head>
|
|
21
|
+
</html>
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import PrintElement from './print.js';
|
|
2
|
+
|
|
3
|
+
var generate = {};
|
|
4
|
+
|
|
5
|
+
generate.model = (id, element) => ({
|
|
6
|
+
id,
|
|
7
|
+
element,
|
|
8
|
+
choiceMode: 'checkbox',
|
|
9
|
+
choicePrefix: 'numbers',
|
|
10
|
+
choices: [
|
|
11
|
+
{
|
|
12
|
+
correct: true,
|
|
13
|
+
value: 'sweden',
|
|
14
|
+
label: 'Sweden',
|
|
15
|
+
feedback: {
|
|
16
|
+
type: 'none',
|
|
17
|
+
value: '',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
value: 'iceland',
|
|
22
|
+
label: 'Iceland',
|
|
23
|
+
feedback: {
|
|
24
|
+
type: 'none',
|
|
25
|
+
value: '',
|
|
26
|
+
},
|
|
27
|
+
rationale: 'Rationale for Iceland',
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
value: 'norway',
|
|
31
|
+
label: 'Norway',
|
|
32
|
+
feedback: {
|
|
33
|
+
type: 'none',
|
|
34
|
+
value: '',
|
|
35
|
+
},
|
|
36
|
+
rationale: 'Rationale for Norway',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
correct: true,
|
|
40
|
+
value: 'finland',
|
|
41
|
+
label: 'Finland',
|
|
42
|
+
feedback: {
|
|
43
|
+
type: 'none',
|
|
44
|
+
value: '',
|
|
45
|
+
},
|
|
46
|
+
rationale: 'Rationale for Finland',
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
extraCSSRules: {
|
|
50
|
+
names: ['red', 'blue'],
|
|
51
|
+
rules: `
|
|
52
|
+
.red {
|
|
53
|
+
color: red !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.blue {
|
|
57
|
+
color: blue !important;
|
|
58
|
+
}
|
|
59
|
+
`,
|
|
60
|
+
},
|
|
61
|
+
prompt: '',
|
|
62
|
+
promptEnabled: true,
|
|
63
|
+
toolbarEditorPosition: 'bottom',
|
|
64
|
+
rubricEnabled: false,
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
const { model } = generate;
|
|
68
|
+
|
|
69
|
+
var config = {
|
|
70
|
+
elements: {
|
|
71
|
+
'multiple-choice': '../..',
|
|
72
|
+
},
|
|
73
|
+
models: [model('1', 'multiple-choice')],
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
// new init - just shows off print!
|
|
77
|
+
|
|
78
|
+
const init = async () => {
|
|
79
|
+
console.log('define the element...');
|
|
80
|
+
await Promise.all(
|
|
81
|
+
config.models.map(async (m) => {
|
|
82
|
+
try {
|
|
83
|
+
const printTag = `${m.element}-print`;
|
|
84
|
+
if (customElements.get(printTag)) {
|
|
85
|
+
return true;
|
|
86
|
+
} else {
|
|
87
|
+
customElements.define(printTag, PrintElement);
|
|
88
|
+
await customElements.whenDefined(printTag);
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
} catch (e) {
|
|
92
|
+
return false;
|
|
93
|
+
}
|
|
94
|
+
})
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
console.log('now apply the model...');
|
|
98
|
+
config.models.forEach((m) => {
|
|
99
|
+
const printTag = `${m.element}-print`;
|
|
100
|
+
const h3s = document.createElement('h3');
|
|
101
|
+
h3s.textContent = 'student mode';
|
|
102
|
+
document.body.appendChild(h3s);
|
|
103
|
+
const de = document.createElement(printTag);
|
|
104
|
+
document.body.appendChild(de);
|
|
105
|
+
de.options = {};
|
|
106
|
+
de.model = m;
|
|
107
|
+
|
|
108
|
+
const h3 = document.createElement('h3');
|
|
109
|
+
h3.textContent = 'instructor mode';
|
|
110
|
+
document.body.appendChild(h3);
|
|
111
|
+
const instr = document.createElement(printTag);
|
|
112
|
+
document.body.appendChild(instr);
|
|
113
|
+
instr.options = { mode: 'instructor' };
|
|
114
|
+
instr.model = JSON.parse(JSON.stringify(m));
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
init()
|
|
119
|
+
.then(() => {
|
|
120
|
+
console.log('ready');
|
|
121
|
+
})
|
|
122
|
+
.catch((e) => {
|
|
123
|
+
console.error(e);
|
|
124
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>@pie-element/multiple-choice@11.1.0</title>
|
|
6
|
+
<link
|
|
7
|
+
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
|
8
|
+
rel="stylesheet"
|
|
9
|
+
/>
|
|
10
|
+
<style>
|
|
11
|
+
html, body {
|
|
12
|
+
font-family: 'Roboto', sans-serif;
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
<script type="module" src="./print-demo.js"></script>
|
|
16
|
+
</head>
|
|
17
|
+
<body></body>
|
|
18
|
+
</html>
|