alice.mosphere.at
this repo has no description
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Crafting Your Values</title>
7 <link rel="stylesheet" href="styles.css" />
8 </head>
9 <body>
10 <div id="app">
11 <header>
12 <h1>Crafting Your Values Exercise</h1>
13 <div id="global-controls">
14 <button id="undoBtn" disabled>Undo</button>
15 <button id="redoBtn" disabled>Redo</button>
16 <button id="clearStorageBtn">Restart exercise</button>
17 <button id="useLimitedValuesBtn">Use 10 Values (default, for testing)</button>
18 <button id="useAllValuesBtn">Use All Values</button>
19 </div>
20 </header>
21
22 <!-- Add Value Form (Initially Hidden) -->
23 <div id="addValueForm" class="modal" style="display: none">
24 <div class="modal-content">
25 <h3>Add New Value</h3>
26 <label for="newValueName">Value Name:</label>
27 <input type="text" id="newValueName" required />
28 <label for="newValueDesc">Description:</label>
29 <textarea id="newValueDesc" rows="3"></textarea>
30 <div class="modal-buttons">
31 <button id="saveNewValueBtn">Save</button>
32 <button id="cancelNewValueBtn">Cancel</button>
33 </div>
34 </div>
35 </div>
36
37 <!-- Part 1: Initial Sorting -->
38 <section id="part1" class="exercise-part">
39 <h2>Part 1: Initial Sorting <button id="showAddValueFormBtn" class="inline-btn">+ Add New</button></h2>
40 <div class="columns">
41 <div class="column" data-column="unassigned">
42 <h3>Unassigned</h3>
43 <div id="part1-unassignedContainer" class="card-container"></div>
44 </div>
45 <div class="column" data-column="veryImportant">
46 <h3>Very important to me</h3>
47 <div id="part1-veryImportantContainer" class="card-container"></div>
48 </div>
49 <div class="column" data-column="important">
50 <h3>Important to me</h3>
51 <div id="part1-importantContainer" class="card-container"></div>
52 </div>
53 <div class="column" data-column="notImportant">
54 <h3>Not important to me</h3>
55 <div id="part1-notImportantContainer" class="card-container"></div>
56 </div>
57 </div>
58 <button id="toPart2">Next</button>
59 </section>
60
61 <!-- Part 2: Further Sorting -->
62 <section id="part2" class="exercise-part" style="display: none">
63 <h2>Part 2: Further Sorting</h2>
64 <p>Take the values from the "Not important to me" and "Important to me" columns and put them aside.</p>
65 <p>
66 Create 3 columns again: "Very important to me", "Important to me" and "Not important to me" and do the same
67 exercise as you did in Part 1, but with the "Very important to me" values only.
68 </p>
69 <div class="columns">
70 <div class="column" data-column="unassigned">
71 <h3>Unassigned</h3>
72 <div id="part2-unassignedContainer" class="card-container"></div>
73 </div>
74 <div class="column" data-column="veryImportant">
75 <h3>Very important to me</h3>
76 <div id="part2-veryImportantContainer" class="card-container"></div>
77 </div>
78 <div class="column" data-column="important">
79 <h3>Important to me</h3>
80 <div id="part2-importantContainer" class="card-container"></div>
81 </div>
82 <div class="column" data-column="notImportant">
83 <h3>Not important to me</h3>
84 <div id="part2-notImportantContainer" class="card-container"></div>
85 </div>
86 </div>
87 <!-- <button id="backToPart1">Back</button> -->
88 <button id="toPart3">Next</button>
89 </section>
90
91 <!-- Part 3: Narrowing Down -->
92 <section id="part3" class="exercise-part" style="display: none">
93 <h2>Part 3: Narrowing Down</h2>
94 <div class="columns">
95 <div class="column" data-column="core">
96 <h3>F*CK YEAH (Core Values, max 5)</h3>
97 <div class="card-container" id="coreContainer"></div>
98 </div>
99 <div class="column" data-column="additional">
100 <h3>Also Something I Want</h3>
101 <div class="card-container" id="additionalContainer"></div>
102 </div>
103 </div>
104 <!-- <button id="backToPart2">Back</button> -->
105 <button id="toPart4">Next</button>
106 </section>
107
108 <!-- Part 4: Final Statements -->
109 <section id="part4" class="exercise-part" style="display: none">
110 <h2>Part 4: Final Statements</h2>
111 <div id="finalStatements"></div>
112 <button id="finish">Finish</button>
113 <!-- <button id="backToPart3">Back</button> -->
114 </section>
115
116 <!-- Review/Export Page -->
117 <section id="review" class="exercise-part" style="display: none">
118 <h2>Review</h2>
119 <div id="reviewContent"></div>
120 <button id="restart">Restart</button>
121 </section>
122 </div>
123
124 <script type="module" src="./index.ts"></script>
125 </body>
126</html>