Skip to content

Commit 11e67ec

Browse files
allangiraoallangirao
authored
Merge pull request #20 from agencyenterprise/feature/new-design
New sandbox style.
2 parents cadef4a + 9dbb89b commit 11e67ec

File tree

7 files changed

+1039
-237
lines changed

7 files changed

+1039
-237
lines changed

‎sandbox/index.html‎

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,49 +14,80 @@
1414
<body>
1515
<div id="app">
1616
<header class="app-header">
17-
<h1>QTI 3 Player Sandbox</h1>
18-
<a
19-
href="https://github.com/agencyenterprise/qti-3-player/tree/main/docs/qti_support"
20-
target="_blank"
21-
>QTI Support Docs</a
22-
>
17+
<div class="header-left">
18+
<div class="app-logo" aria-hidden="true"></div>
19+
<div class="app-title">
20+
<h1>QTI 3 Player</h1>
21+
<span>Sandbox</span>
22+
</div>
23+
</div>
24+
<div class="header-actions">
25+
<button id="theme-toggle" class="icon-btn" type="button" aria-label="Toggle theme">
26+
<span
27+
class="icon-slot theme-icon theme-icon-sun"
28+
data-icon="sun"
29+
aria-hidden="true"
30+
></span>
31+
<span
32+
class="icon-slot theme-icon theme-icon-moon"
33+
data-icon="moon"
34+
aria-hidden="true"
35+
></span>
36+
<span class="theme-label">Dark</span>
37+
</button>
38+
<a
39+
class="link-btn"
40+
href="https://github.com/agencyenterprise/qti-3-player/tree/main/docs/qti_support"
41+
target="_blank"
42+
rel="noreferrer"
43+
>Docs</a
44+
>
45+
</div>
2346
</header>
2447
<div class="container">
2548
<div class="editor-pane">
26-
<h2>QTI XML Input</h2>
27-
<h3 id="editor-title">Main</h3>
28-
<textarea id="xml-input" placeholder="Paste your QTI XML here..."></textarea>
29-
<div class="selector-container" id="xml-source-selector-container">
30-
<label id="xml-source-selector-label" for="xml-source-selector" class="selector-label">
31-
Switch XML (Main vs item-ref href)
32-
</label>
33-
<select id="xml-source-selector"></select>
34-
</div>
35-
<div class="controls">
36-
<button id="validate-btn">Validate XML</button>
37-
<button id="render-btn">Render QTI</button>
38-
<label class="toggle-control">
39-
<input type="checkbox" id="custom-css-toggle" />
40-
<span class="toggle-slider"></span>
41-
<span class="toggle-label">Custom CSS</span>
42-
</label>
49+
<div class="pane-header editor-header">
50+
<div class="pane-left">
51+
<div class="selector-container selector-top" id="xml-source-selector-container">
52+
<select id="xml-source-selector" aria-label="XML Source"></select>
53+
</div>
54+
</div>
55+
<div class="pane-actions editor-actions">
56+
<button id="validate-btn" class="btn btn-primary">
57+
<span class="icon-slot" data-icon="check-circle" aria-hidden="true"></span>
58+
Validate
59+
</button>
60+
<button id="render-btn" class="btn btn-primary">
61+
<span class="icon-slot" data-icon="play" aria-hidden="true"></span>
62+
Render
63+
</button>
64+
</div>
4365
</div>
66+
<div id="xml-editor" class="code-editor" aria-label="QTI XML input"></div>
4467
<div id="validation-result"></div>
4568
</div>
4669
<div class="resizer" id="dragMe"></div>
4770
<div class="preview-pane">
48-
<div class="preview-header">
49-
<h2>Preview</h2>
71+
<div class="pane-bar pane-bar-top">
72+
<div class="pane-actions pane-actions-left pane-actions-stack">
73+
<button id="submit-btn" class="btn btn-primary">Submit Answer</button>
74+
<span id="submission-count" class="pane-subtitle">Submissions: 0</span>
75+
</div>
76+
<div class="pane-actions pane-actions-center">
77+
<button id="prev-btn" class="btn btn-secondary" disabled>Previous</button>
78+
<button id="next-btn" class="btn btn-secondary" disabled>Next</button>
79+
</div>
80+
<div class="pane-actions pane-actions-right">
81+
<label class="toggle-control compact">
82+
<input type="checkbox" id="custom-css-toggle" />
83+
<span class="toggle-slider"></span>
84+
<span class="toggle-label">Custom CSS</span>
85+
</label>
86+
</div>
5087
</div>
5188
<div class="renderer-wrapper">
5289
<div id="qti-container"></div>
5390
</div>
54-
<div class="controls preview-controls">
55-
<span id="submission-count">Submissions: 0</span>
56-
<button id="prev-btn" class="secondary-btn" disabled>Previous</button>
57-
<button id="next-btn" class="secondary-btn" disabled>Next</button>
58-
<button id="submit-btn" class="primary-btn">Submit Answer</button>
59-
</div>
6091
</div>
6192
</div>
6293
</div>

‎sandbox/package-lock.json‎

Lines changed: 183 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sandbox/package.json‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,19 @@
1010
},
1111
"dependencies": {
1212
"@ae-studio/qti-renderer": "file:../packages/qti-renderer",
13-
"@qti-renderer/vanilla": "file:../packages/qti-vanilla"
13+
"@codemirror/lang-xml": "^6.1.0",
14+
"@codemirror/language": "^6.12.1",
15+
"@codemirror/state": "^6.5.4",
16+
"@codemirror/view": "^6.39.12",
17+
"@lezer/highlight": "^1.2.3",
18+
"@qti-renderer/vanilla": "file:../packages/qti-vanilla",
19+
"codemirror": "^6.0.2",
20+
"lucide": "^0.563.0"
1421
},
1522
"devDependencies": {
16-
"typescript": "^5.0.0",
17-
"vite": "^7.3.1",
1823
"postcss": "^8.4.0",
19-
"postcss-prefix-selector": "^1.16.0"
24+
"postcss-prefix-selector": "^1.16.0",
25+
"typescript": "^5.0.0",
26+
"vite": "^7.3.1"
2027
}
2128
}

0 commit comments

Comments
 (0)