-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
173 lines (163 loc) · 7.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<script type="module" src="/main.ts"></script>
<title>Ask Good Questions</title>
</head>
<body
x-data="question"
class="dark:bg-zinc-900 dark:text-zinc-100 bg-zinc-100 px-5"
>
<h1 class="text-4xl font-extrabold tracking-wide text-center mt-8">
Your Roadmap to Effective Questions
</h1>
<p class="text-2xl font-bold text-center mt-2 mb-12">
From Frustration to Clarity in Four Simple Steps
</p>
<p class="w-full max-w-[70ch] m-auto">
Discover the undeniable power of asking the right questions. Explore how a
well-constructed inquiry can be your secret weapon in obtaining the
answers you need. Our four-step process will show you
<strong class="text-teal-800 dark:text-teal-400"
>that the quality of your question often determines the quality of your
answer.</strong
>
Elevate your questions, elevate your results.
</p>
<section class="m-auto w-full max-w-[70ch] my-8">
<h2 class="text-3xl mb-4" id="summarise">
Step 1: Summarise your issue in one sentence
</h2>
<p>
Summarizing the question in one sentence means expressing your main
problem or question in a short and clear statement. This helps people
who might help you understand what you need quickly. This way, everyone
knows what to expect, and no time will be wasted. Also, check out
<a
class="px-1 -mx-1 rounded text-teal-800 dark:text-teal-400 underline underline-offset-4 hover:dark:bg-teal-400 dark:bg-teal-400/5 hover:bg-teal-800 bg-teal-800/5 hover:dark:text-zinc-900 hover:text-zinc-100"
href="https://dontasktoask.com"
>Don't Ask to Ask, Just Ask</a
>
to understand what it means to start with a bad intro into your
question.
</p>
<input
x-model="summarise"
class="focus:border-teal-800 focus:shadow-outer shadow-teal-800/20 dark:shadow-teal-400/20 outline-none focus:dark:border-teal-400 w-full border-[3px] rounded border-zinc-900 dark:border-zinc-100 my-4 bg-inherit p-2"
type="text"
placeholder="Summarise your issue in one sentence"
aria-labelledby="summarise"
/>
<div id="summarise-output"></div>
</section>
<section class="m-auto w-full max-w-[70ch] my-8">
<h2 class="text-3xl mb-4" id="problem">
Step 2: Explain the Problem you are trying to solve
</h2>
<p>
Explaining the problem you're facing means providing a clear and
detailed account of the issue from the very beginning, without jumping
ahead to the solutions you've tried or what didn't work. This approach
helps prevent
<a
class="px-1 -mx-1 rounded text-teal-800 dark:text-teal-400 underline underline-offset-4 hover:dark:bg-teal-400 dark:bg-teal-400/5 hover:bg-teal-800 bg-teal-800/5 hover:dark:text-zinc-900 hover:text-zinc-100"
href="https://xyproblem.info"
>the XY Problem</a
>, where the focus shifts to solving a perceived solution rather than
addressing the actual underlying issue. By starting at the beginning and
describing the problem as it occurred, you ensure that potential helpers
can fully understand the context and provide more accurate and effective
assistance.
</p>
<textarea
x-model="problem"
class="focus:border-teal-800 focus:shadow-outer shadow-teal-800/20 dark:shadow-teal-400/20 outline-none focus:dark:border-teal-400 w-full border-[3px] rounded border-zinc-900 dark:border-zinc-100 my-4 bg-inherit p-2"
type="text"
placeholder="Explain the Problem you are trying to solve"
aria-labelledby="problem"
x-on:input="resize"
></textarea>
</section>
<section class="m-auto w-full max-w-[70ch] my-8">
<h2 class="text-3xl mb-4" id="solving">
Step 3: Describe what you have tried to solve the problem
</h2>
<p>
Detailing your efforts to solve the problem involves sharing the steps
you've taken or the methods you've employed in your attempts to address
the issue. This includes any relevant actions, strategies, or code
snippets you've utilized. By providing this information, you enable
potential helpers to grasp your problem-solving process and offer more
targeted suggestions
</p>
<textarea
x-model="solving"
class="focus:border-teal-800 focus:shadow-outer shadow-teal-800/20 dark:shadow-teal-400/20 outline-none focus:dark:border-teal-400 w-full border-[3px] rounded border-zinc-900 dark:border-zinc-100 my-4 bg-inherit p-2"
type="text"
placeholder="Describe what you have tried to solve the problem"
aria-labelledby="solving"
x-on:input="resize"
></textarea>
</section>
<section class="m-auto w-full max-w-[70ch] my-8">
<h2 class="text-3xl mb-4" id="expectation">
Step 4: Clarifying the expected result
</h2>
<p>
In this section, articulate the ultimate result or solution you are
aiming for. Clearly convey what you hope to achieve with your question.
Providing a crystal-clear picture of your desired outcome helps
potential helpers align their suggestions with your specific goals,
ensuring more accurate and relevant assistance.
</p>
<textarea
x-model="expectation"
class="focus:border-teal-800 focus:shadow-outer shadow-teal-800/20 dark:shadow-teal-400/20 outline-none focus:dark:border-teal-400 w-full border-[3px] rounded border-zinc-900 dark:border-zinc-100 my-4 bg-inherit p-2"
type="text"
placeholder="Clarifying the expected result"
aria-labelledby="expectation"
x-on:input="resize"
></textarea>
</section>
<section class="m-auto w-full max-w-[70ch] my-8">
<div class="flex gap-4">
<button
x-on:click="preview"
class="bg-teal-800 dark:bg-teal-400 dark:hover:bg-zinc-900 hover:bg-zinc-100 dark:border-teal-400 border-teal-800 border-[3px] dark:hover:text-teal-400 hover:text-teal-800 text-zinc-100 dark:text-zinc-900 px-4 py-2 w-full rounded my-4 font-bold"
>
Show preview
</button>
<button
x-on:click="copy"
class="bg-teal-800 dark:bg-teal-400 dark:hover:bg-zinc-900 hover:bg-zinc-100 dark:border-teal-400 border-teal-800 border-[3px] dark:hover:text-teal-400 hover:text-teal-800 text-zinc-100 dark:text-zinc-900 px-4 py-2 w-full rounded my-4 font-bold"
>
Copy markdown to clipboard
</button>
</div>
<article x-html="markup" class="prose dark:prose-invert"></article>
</section>
<footer class="p-4 border-t-[3px]">
<ul class="flex gap-4">
<li>Site created by Wiktoria</li>
<li>
<a
class="px-1 -mx-1 rounded text-teal-800 dark:text-teal-400 underline underline-offset-4 hover:dark:bg-teal-400 dark:bg-teal-400/5 hover:bg-teal-800 bg-teal-800/5 hover:dark:text-zinc-900 hover:text-zinc-100"
href="https://github.com/Braweria/ask-good-questions"
>Github Repository</a
>
</li>
<li>
<a
class="px-1 -mx-1 rounded text-teal-800 dark:text-teal-400 underline underline-offset-4 hover:dark:bg-teal-400 dark:bg-teal-400/5 hover:bg-teal-800 bg-teal-800/5 hover:dark:text-zinc-900 hover:text-zinc-100"
href="/accessibility-statement"
>Accessibility Statement</a
>
</li>
</ul>
</footer>
</body>
</html>