this repo has no description
before specs refactor
+324
-97
+32
-13
index.html
+32
-13
index.html
···
17
17
</div>
18
18
</header>
19
19
20
-
<!-- Part 1: Sorting -->
20
+
<!-- Part 1: Initial Sorting -->
21
21
<section id="part1" class="exercise-part">
22
22
<h2>Part 1: Initial Sorting</h2>
23
23
<div class="columns">
24
-
<div class="column" data-column="unassigned">
25
-
<h3>Unassigned</h3>
26
-
<div class="card-container" id="unassignedContainer"></div>
27
-
</div>
28
24
<div class="column" data-column="veryImportant">
29
25
<h3>Very important to me</h3>
30
26
<div class="card-container" id="veryImportantContainer"></div>
···
41
37
<button id="toPart2">Next</button>
42
38
</section>
43
39
44
-
<!-- Part 2: Narrowing Down -->
40
+
<!-- Part 2: Further Sorting -->
45
41
<section id="part2" class="exercise-part" style="display: none;">
46
-
<h2>Part 2: Narrowing Down</h2>
42
+
<h2>Part 2: Further Sorting</h2>
43
+
<p>Take the values from the "Not important to me" and "Important to me" columns and put them aside.</p>
44
+
<p>Create 3 columns again: "Very important to me", "Important to me" and "Not important to me" and do the same exercise as you did in Part 1, but with the "Very important to me" values only.</p>
45
+
<div class="columns">
46
+
<div class="column" data-column="veryImportant">
47
+
<h3>Very important to me</h3>
48
+
<div class="card-container" id="veryImportantContainer"></div>
49
+
</div>
50
+
<div class="column" data-column="important">
51
+
<h3>Important to me</h3>
52
+
<div class="card-container" id="importantContainer"></div>
53
+
</div>
54
+
<div class="column" data-column="notImportant">
55
+
<h3>Not important to me</h3>
56
+
<div class="card-container" id="notImportantContainer"></div>
57
+
</div>
58
+
</div>
59
+
<button id="backToPart1">Back</button>
60
+
<button id="toPart3">Next</button>
61
+
</section>
62
+
63
+
<!-- Part 3: Narrowing Down -->
64
+
<section id="part3" class="exercise-part" style="display: none;">
65
+
<h2>Part 3: Narrowing Down</h2>
47
66
<div class="columns">
48
67
<div class="column" data-column="core">
49
68
<h3>F*CK YEAH (Core Values, max 5)</h3>
···
54
73
<div class="card-container" id="additionalContainer"></div>
55
74
</div>
56
75
</div>
57
-
<button id="backToPart1">Back</button>
58
-
<button id="toPart3">Next</button>
76
+
<button id="backToPart2">Back</button>
77
+
<button id="toPart4">Next</button>
59
78
</section>
60
79
61
-
<!-- Part 3: Final Statements -->
62
-
<section id="part3" class="exercise-part" style="display: none;">
63
-
<h2>Part 3: Final Statements</h2>
80
+
<!-- Part 4: Final Statements -->
81
+
<section id="part4" class="exercise-part" style="display: none;">
82
+
<h2>Part 4: Final Statements</h2>
64
83
<div id="finalStatements"></div>
65
-
<button id="backToPart2">Back</button>
84
+
<button id="backToPart3">Back</button>
66
85
<button id="finish">Finish</button>
67
86
</section>
68
87
+160
-84
index.ts
+160
-84
index.ts
···
3
3
id: number;
4
4
name: string;
5
5
column: string; // Part1: "unassigned", "notImportant", "important", "veryImportant"
6
-
// Part2: "core" or "additional" (for cards carried over from veryImportant)
6
+
// Part2: same as Part1
7
+
// Part3: "core" or "additional" (for cards carried over from veryImportant)
7
8
order: number;
8
9
}
9
10
10
11
interface AppState {
11
-
currentPart: "part1" | "part2" | "part3" | "review";
12
+
currentPart: "part1" | "part2" | "part3" | "part4" | "review";
12
13
cards: ValueCard[];
13
-
// In part 3, user can add final statements for each core value (by card id)
14
+
// In part 4, user can add final statements for each core value (by card id)
14
15
finalStatements: { [cardId: number]: string };
15
16
}
16
17
···
94
95
"CHALLENGE",
95
96
"CHANGE",
96
97
"COMFORT",
97
-
"COMMITMENT",
98
-
"COMPASSION",
99
-
"CONTRIBUTION",
100
-
"COOPERATION",
101
-
"COURTESY",
102
-
"CREATIVITY",
103
-
"DEPENDABILITY",
104
-
"DUTY",
105
-
"ECOLOGY",
106
-
"EXCITEMENT",
107
-
"FAITHFULNESS",
108
-
"FAME",
109
-
"FAMILY",
110
-
"FITNESS",
111
-
"FLEXIBILITY",
112
-
"FORGIVENESS",
113
-
"FRIENDSHIP",
114
-
"FUN",
115
-
"GENEROSITY",
116
-
"GENUINENESS",
117
-
"GOD'S WILL",
118
-
"GROWTH",
119
-
"HEALTH",
120
-
"HELPFULNESS",
121
-
"HONESTY",
122
-
"HOPE",
123
-
"HUMILITY",
124
-
"HUMOR",
125
-
"INDEPENDENCE",
126
-
"INDUSTRY",
127
-
"INNER PEACE",
128
-
"INTIMACY",
129
-
"JUSTICE",
130
-
"KNOWLEDGE",
131
-
"LEISURE",
132
-
"LOVED",
133
-
"LOVING",
134
-
"MASTERY",
135
-
"MINDFULNESS",
136
-
"MODERATION",
137
-
"MONOGAMY",
138
-
"NONCONFORMITY",
139
-
"NURTURANCE",
140
-
"OPENNESS",
141
-
"ORDER",
142
-
"PASSION",
143
-
"PLEASURE",
144
-
"POPULARITY",
145
-
"POWER",
146
-
"PURPOSE",
147
-
"RATIONALITY",
148
-
"REALISM",
149
-
"RESPONSIBILITY",
150
-
"RISK",
151
-
"ROMANCE",
152
-
"SAFETY",
153
-
"SELF-ACCEPTANCE",
154
-
"SELF-CONTROL",
155
-
"SELF-ESTEEM",
156
-
"SELF-KNOWLEDGE",
157
-
"SERVICE",
158
-
"SEXUALITY",
159
-
"SIMPLICITY",
160
-
"SOLITUDE",
161
-
"SPIRITUALITY",
162
-
"STABILITY",
163
-
"TOLERANCE",
164
-
"TRADITION",
165
-
"VIRTUE",
166
-
"WEALTH",
167
-
"WORLD PEACE",
98
+
// "COMMITMENT",
99
+
// "COMPASSION",
100
+
// "CONTRIBUTION",
101
+
// "COOPERATION",
102
+
// "COURTESY",
103
+
// "CREATIVITY",
104
+
// "DEPENDABILITY",
105
+
// "DUTY",
106
+
// "ECOLOGY",
107
+
// "EXCITEMENT",
108
+
// "FAITHFULNESS",
109
+
// "FAME",
110
+
// "FAMILY",
111
+
// "FITNESS",
112
+
// "FLEXIBILITY",
113
+
// "FORGIVENESS",
114
+
// "FRIENDSHIP",
115
+
// "FUN",
116
+
// "GENEROSITY",
117
+
// "GENUINENESS",
118
+
// "GOD'S WILL",
119
+
// "GROWTH",
120
+
// "HEALTH",
121
+
// "HELPFULNESS",
122
+
// "HONESTY",
123
+
// "HOPE",
124
+
// "HUMILITY",
125
+
// "HUMOR",
126
+
// "INDEPENDENCE",
127
+
// "INDUSTRY",
128
+
// "INNER PEACE",
129
+
// "INTIMACY",
130
+
// "JUSTICE",
131
+
// "KNOWLEDGE",
132
+
// "LEISURE",
133
+
// "LOVED",
134
+
// "LOVING",
135
+
// "MASTERY",
136
+
// "MINDFULNESS",
137
+
// "MODERATION",
138
+
// "MONOGAMY",
139
+
// "NONCONFORMITY",
140
+
// "NURTURANCE",
141
+
// "OPENNESS",
142
+
// "ORDER",
143
+
// "PASSION",
144
+
// "PLEASURE",
145
+
// "POPULARITY",
146
+
// "POWER",
147
+
// "PURPOSE",
148
+
// "RATIONALITY",
149
+
// "REALISM",
150
+
// "RESPONSIBILITY",
151
+
// "RISK",
152
+
// "ROMANCE",
153
+
// "SAFETY",
154
+
// "SELF-ACCEPTANCE",
155
+
// "SELF-CONTROL",
156
+
// "SELF-ESTEEM",
157
+
// "SELF-KNOWLEDGE",
158
+
// "SERVICE",
159
+
// "SEXUALITY",
160
+
// "SIMPLICITY",
161
+
// "SOLITUDE",
162
+
// "SPIRITUALITY",
163
+
// "STABILITY",
164
+
// "TOLERANCE",
165
+
// "TRADITION",
166
+
// "VIRTUE",
167
+
// "WEALTH",
168
+
// "WORLD PEACE",
168
169
];
169
170
const sampleCards: ValueCard[] = values.map((name, index) => ({
170
171
id: index + 1,
···
199
200
document.getElementById("toPart2")?.addEventListener("click", () => {
200
201
const newState = this.undoManager.getState();
201
202
newState.currentPart = "part2";
202
-
// In Part2, we carry over only the "veryImportant" cards.
203
+
// In Part2, we only keep the "veryImportant" cards and move them to "unassigned"
203
204
newState.cards = newState.cards
204
205
.filter((c) => c.column === "veryImportant")
205
-
.map((c, idx) => ({ ...c, column: "core", order: idx })); // default assign all to core initially
206
+
.map((c) => ({ ...c, column: "unassigned" }));
206
207
this.updateState(newState);
207
208
});
208
209
document.getElementById("backToPart1")?.addEventListener("click", () => {
209
210
const newState = this.undoManager.getState();
210
211
newState.currentPart = "part1";
211
-
// Restore Part1: for simplicity, move cards back to "veryImportant" if they were in core/additional.
212
+
// Restore Part1: move cards back to their original positions
212
213
newState.cards.forEach((c) => {
213
-
if (c.column === "core" || c.column === "additional") {
214
+
if (c.column === "unassigned") {
214
215
c.column = "veryImportant";
215
216
}
216
217
});
···
218
219
});
219
220
document.getElementById("toPart3")?.addEventListener("click", () => {
220
221
const newState = this.undoManager.getState();
221
-
newState.currentPart = "part3";
222
+
const veryImportantCount = newState.cards.filter((c) => c.column === "veryImportant").length;
223
+
if (veryImportantCount <= 5) {
224
+
// If 5 or fewer values in "Very important to me", skip to Part 4
225
+
newState.currentPart = "part4";
226
+
// Move all "veryImportant" cards to "core"
227
+
newState.cards = newState.cards
228
+
.filter((c) => c.column === "veryImportant")
229
+
.map((c, idx) => ({ ...c, column: "core", order: idx }));
230
+
} else {
231
+
// Otherwise, proceed to Part 3
232
+
newState.currentPart = "part3";
233
+
// Move all "veryImportant" cards to "core"
234
+
newState.cards = newState.cards
235
+
.filter((c) => c.column === "veryImportant")
236
+
.map((c, idx) => ({ ...c, column: "core", order: idx }));
237
+
}
222
238
this.updateState(newState);
223
239
});
224
240
document.getElementById("backToPart2")?.addEventListener("click", () => {
225
241
const newState = this.undoManager.getState();
226
242
newState.currentPart = "part2";
243
+
// Restore Part2: move cards back to their original positions
244
+
newState.cards.forEach((c) => {
245
+
if (c.column === "core" || c.column === "additional") {
246
+
c.column = "veryImportant";
247
+
}
248
+
});
249
+
this.updateState(newState);
250
+
});
251
+
document.getElementById("toPart4")?.addEventListener("click", () => {
252
+
const newState = this.undoManager.getState();
253
+
const coreCount = newState.cards.filter((c) => c.column === "core").length;
254
+
if (coreCount > 5) {
255
+
alert("You can only have 5 core values! Please move some values to 'Also Something I Want' before continuing.");
256
+
return;
257
+
}
258
+
newState.currentPart = "part4";
259
+
this.updateState(newState);
260
+
});
261
+
document.getElementById("backToPart3")?.addEventListener("click", () => {
262
+
const newState = this.undoManager.getState();
263
+
newState.currentPart = "part3";
227
264
this.updateState(newState);
228
265
});
229
266
document.getElementById("finish")?.addEventListener("click", () => {
···
319
356
partElem.style.display = "block";
320
357
}
321
358
// Render cards for the current part.
322
-
if (this.state.currentPart === "part1") {
359
+
if (this.state.currentPart === "part1" || this.state.currentPart === "part2") {
323
360
// Clear containers
324
361
[
325
362
"unassignedContainer",
···
346
383
container.appendChild(cardElem);
347
384
}
348
385
});
349
-
} else if (this.state.currentPart === "part2") {
350
-
// Clear containers for part2.
386
+
} else if (this.state.currentPart === "part3") {
387
+
// Clear containers for part3
351
388
["coreContainer", "additionalContainer"].forEach((id) => {
352
389
const container = document.getElementById(id);
353
390
if (container) container.innerHTML = "";
354
391
});
355
392
this.state.cards.forEach((card) => {
356
-
// In part2, only cards coming from part1's "veryImportant" are present.
357
393
if (card.column === "core" || card.column === "additional") {
358
394
const containerId = card.column + "Container";
359
395
const container = document.getElementById(containerId);
···
370
406
}
371
407
}
372
408
});
373
-
} else if (this.state.currentPart === "part3") {
409
+
} else if (this.state.currentPart === "part4") {
374
410
// Render text inputs for each core value.
375
411
const finalStatements = document.getElementById("finalStatements");
376
412
if (finalStatements) {
···
398
434
const reviewContent = document.getElementById("reviewContent");
399
435
if (reviewContent) {
400
436
reviewContent.innerHTML = "";
437
+
438
+
// Add the visualization grid
439
+
const grid = document.createElement("div");
440
+
grid.className = "values-grid";
441
+
442
+
// Create sections for each category
443
+
const categories = [
444
+
{ title: "Core Values (F*CK YEAH)", column: "core" },
445
+
{ title: "Important To Me", column: "important" },
446
+
{ title: "Very Important To Me", column: "veryImportant" },
447
+
{ title: "Not Important To Me", column: "notImportant" }
448
+
];
449
+
450
+
categories.forEach(category => {
451
+
const section = document.createElement("div");
452
+
section.className = "grid-section";
453
+
const title = document.createElement("h3");
454
+
title.textContent = category.title;
455
+
section.appendChild(title);
456
+
457
+
const values = this.state.cards
458
+
.filter(c => c.column === category.column)
459
+
.map(c => c.name);
460
+
461
+
if (values.length > 0) {
462
+
const list = document.createElement("ul");
463
+
values.forEach(value => {
464
+
const li = document.createElement("li");
465
+
li.textContent = value;
466
+
list.appendChild(li);
467
+
});
468
+
section.appendChild(list);
469
+
}
470
+
471
+
grid.appendChild(section);
472
+
});
473
+
474
+
reviewContent.appendChild(grid);
475
+
476
+
// Add the final statements
401
477
const title = document.createElement("h3");
402
478
title.textContent = "Your Core Values & Statements:";
403
479
reviewContent.appendChild(title);
+93
specs.md
+93
specs.md
···
1
+
# Crafting Your Values - Specifications
2
+
3
+
## Overview
4
+
The "Crafting Your Values" exercise is designed to help you identify and refine what truly matters in your life. It guides you through a process of sorting, narrowing down, and articulating your core values. The exercise consists of four main parts and includes a comprehensive list of value cards.
5
+
6
+
## Part 1: So What's Actually Important to You (and What Isn't)
7
+
- **Objective:**
8
+
Begin by categorizing all provided values based on their personal significance.
9
+
10
+
- **Setup:**
11
+
- Use a set of value cards (printed or digital).
12
+
- Prepare three columns titled:
13
+
- **"Very important to me"**
14
+
- **"Important to me"**
15
+
- **"Not important to me"**
16
+
17
+
- **Instructions:**
18
+
- Place each value card into one of the three columns based on your immediate, gut reaction.
19
+
- Do not overthink the placement; trust your feelings.
20
+
- Review and adjust the placements until the columns accurately represent your priorities.
21
+
22
+
## Part 2: Narrowing Down
23
+
- **Objective:**
24
+
Refine the selection by focusing on values that you initially rated as "Very important to me."
25
+
26
+
- **Instructions:**
27
+
- Set aside the values in the "Not important to me" and "Important to me" columns.
28
+
- Re-create three columns using only the values from the previous **"Very important to me"** category:
29
+
- **"Very important to me"**
30
+
- **"Important to me"**
31
+
- **"Not important to me"**
32
+
- Sort the remaining values again, comparing their relative importance.
33
+
- Adjust the order until you feel that the columns accurately reflect your priorities.
34
+
35
+
- **Outcome:**
36
+
- If you end up with 5 or fewer values in the **"Very important to me"** column, you may skip the next step.
37
+
- Otherwise, proceed to Part 3 for further refinement.
38
+
39
+
## Part 3: The Most Important Stuff
40
+
- **Objective:**
41
+
Identify your top core values from the refined list.
42
+
43
+
- **Instructions:**
44
+
- From the values sorted in Part 2, create two new columns:
45
+
- **"Very important to me"** (suggested label: **"F*CK YEAH"** – your must-haves)
46
+
- **"Also something I want in my life"** (suggested label: **"THIS IS AWESOME TOO"**)
47
+
- **Rule:** The **"F*CK YEAH"** column can contain a maximum of **5 values**.
48
+
- Finalize the selection by ensuring that only 5 values occupy the **"F*CK YEAH"** column.
49
+
50
+
- **Additional Task:**
51
+
- For each of your 5 core values, write a personalized statement in the following format:
52
+
- *I want [description of your core value]*
53
+
_(Example: "I want to accept myself as I am (self-acceptance)")_
54
+
55
+
## Part 4: Your Core Values (Reference/Visualization)
56
+
- **Objective:**
57
+
Provide a visual summary of your final values.
58
+
59
+
- **Instructions:**
60
+
- Review a sample grid or template displaying categories such as:
61
+
- **Personal Values**
62
+
- **Important To Me**
63
+
- **Very Important To Me**
64
+
- **Not Important To Me**
65
+
- Use this grid as a reference to ensure that your selections accurately represent your priorities.
66
+
- This part may be provided as a printed template or a visual guide and serves as a confirmation of your finalized core values.
67
+
68
+
## Values List
69
+
The exercise includes a comprehensive list of values. Some of the values are:
70
+
71
+
- **ACCEPTANCE, ACCURACY, ACHIEVEMENT, ADVENTURE, ATTRACTIVENESS, AUTHORITY, AUTONOMY, BEAUTY, CARING, CHALLENGE, CHANGE, COMFORT, COMMITMENT, COMPASSION, CONTRIBUTION, COOPERATION, COURTESY, CREATIVITY, DEPENDABILITY, DUTY, ECOLOGY, EXCITEMENT, FAITHFULNESS, FAME, FAMILY, FITNESS, FLEXIBILITY, FORGIVENESS, FRIENDSHIP, FUN, GENEROSITY, GENUINENESS, GOD’S WILL, GROWTH, HEALTH, HELPFULNESS, HONESTY, HOPE, HUMILITY, HUMOR, INDEPENDENCE, INDUSTRY, INNER PEACE, INTIMACY, JUSTICE, KNOWLEDGE, LEISURE, LOVED, LOVING, MASTERY, MINDFULNESS, MODERATION, MONOGAMY, NONCONFORMITY, NURTURANCE, OPENNESS, ORDER, PASSION, PLEASURE, POPULARITY, POWER, PURPOSE, RATIONALITY, REALISM, RESPONSIBILITY, RISK, ROMANCE, SAFETY, SELF-ACCEPTANCE, SELF-CONTROL, SELF-ESTEEM, SELF-KNOWLEDGE, SERVICE, SEXUALITY, SIMPLICITY, SOLITUDE, SPIRITUALITY, STABILITY, TOLERANCE, TRADITION, VIRTUE, WEALTH, WORLD PEACE.
72
+
73
+
*(This list is not exhaustive; ensure all values from the original instrument are included.)*
74
+
75
+
## Additional Considerations
76
+
- **Flexibility:**
77
+
There is no "one right way" to complete the exercise. Adapt the process to what feels most authentic to you.
78
+
79
+
- **Iterative Process:**
80
+
You may move value cards multiple times as your understanding and priorities evolve.
81
+
82
+
- **Reflection:**
83
+
Use the exercise as an opportunity for deep self-reflection to better understand what truly matters in your life.
84
+
85
+
## Final Outcome
86
+
By the end of the exercise, you will have:
87
+
- A clear categorization of your values.
88
+
- A refined list of your top 5 core values.
89
+
- Personalized statements that articulate your core values.
90
+
- A visual summary or template that confirms your final selections.
91
+
92
+
## Public Domain
93
+
This instrument is in the public domain and may be copied, adapted, and used without permission.
+39
styles.css
+39
styles.css
···
56
56
border-radius: 4px;
57
57
cursor: grab;
58
58
}
59
+
60
+
.values-grid {
61
+
display: grid;
62
+
grid-template-columns: repeat(2, 1fr);
63
+
gap: 2em;
64
+
margin-bottom: 2em;
65
+
padding: 1em;
66
+
background: #f8f9fa;
67
+
border-radius: 4px;
68
+
}
69
+
70
+
.grid-section {
71
+
background: white;
72
+
padding: 1em;
73
+
border-radius: 4px;
74
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
75
+
}
76
+
77
+
.grid-section h3 {
78
+
margin-top: 0;
79
+
color: #495057;
80
+
border-bottom: 1px solid #dee2e6;
81
+
padding-bottom: 0.5em;
82
+
}
83
+
84
+
.grid-section ul {
85
+
list-style: none;
86
+
padding: 0;
87
+
margin: 0;
88
+
}
89
+
90
+
.grid-section li {
91
+
padding: 0.5em 0;
92
+
border-bottom: 1px solid #eee;
93
+
}
94
+
95
+
.grid-section li:last-child {
96
+
border-bottom: none;
97
+
}
59
98