Skip to content

Commit 787e692

Browse files
Copilotdwarwick
Copilot
and
dwarwick
committed
Add comprehensive question branching documentation to CreatingSurveys page
Co-authored-by: dwarwick <15970276+dwarwick@users.noreply.github.com>
1 parent e1484c0 commit 787e692

File tree

1 file changed

+157
-0
lines changed

1 file changed

+157
-0
lines changed

‎JwtIdentity.Client/Pages/Docs/CreatingSurveys.razor‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,160 @@
101101
</MudList>
102102
</MudPaper>
103103
</section>
104+
105+
<section id="question-branching" class="mb-8">
106+
<MudText Typo="Typo.h2" Class="mb-3">Configure Question Branching</MudText>
107+
<MudPaper Class="pa-4">
108+
<MudText Typo="Typo.body1" Class="mb-4">
109+
Question branching allows you to create dynamic surveys where the questions shown to respondents depend on their previous answers. This creates personalized survey experiences and more relevant data collection.
110+
</MudText>
111+
112+
<MudText Typo="Typo.h3" Class="mb-2 mt-4">Understanding Question Groups</MudText>
113+
<MudText Typo="Typo.body1" Class="mb-2">
114+
Question branching is organized using <strong>Question Groups</strong>. Each group contains one or more questions that can be shown together based on branching logic.
115+
</MudText>
116+
<MudList T="string">
117+
<MudListItem T="string" Icon="@Icons.Material.Filled.Folder">
118+
You can create up to <strong>10 question groups</strong> per survey (numbered 0-9).
119+
</MudListItem>
120+
<MudListItem T="string" Icon="@Icons.Material.Filled.Home">
121+
<strong>Group 0 (Default Group):</strong> All questions are initially placed in the Default Group. Questions in this group are always shown first (except for Last Questions, which are shown at the end).
122+
</MudListItem>
123+
<MudListItem T="string" Icon="@Icons.Material.Filled.Edit">
124+
You can <strong>rename question groups</strong> with descriptive names to make your branching logic easier to understand (e.g., "Homeowner Questions", "Renter Questions").
125+
</MudListItem>
126+
<MudListItem T="string" Icon="@Icons.Material.Filled.Rule">
127+
Each group must contain <strong>at least 1 question</strong>. Empty groups are not allowed.
128+
</MudListItem>
129+
<MudListItem T="string" Icon="@Icons.Material.Filled.Block">
130+
You <strong>cannot branch back to the Default Group (Group 0)</strong> from other groups. The Default Group always appears first in the survey flow.
131+
</MudListItem>
132+
</MudList>
133+
134+
<MudText Typo="Typo.h3" Class="mb-2 mt-4">How to Configure Branching</MudText>
135+
<MudList T="string">
136+
<MudListItem T="string" Icon="@Icons.Material.Filled.Settings">
137+
After creating your survey and questions, click <MudChip T="string" Size="@MudBlazor.Size.Small" Color="Color.Primary">Configure Branching</MudChip> on the Edit Survey page.
138+
</MudListItem>
139+
<MudListItem T="string" Icon="@Icons.Material.Filled.AddCircleOutline">
140+
Click <MudChip T="string" Size="@MudBlazor.Size.Small" Color="Color.Success">Add Group</MudChip> to create new question groups.
141+
</MudListItem>
142+
<MudListItem T="string" Icon="@Icons.Material.Filled.MoveToInbox">
143+
Use the dropdown next to each question to <strong>move questions between groups</strong>.
144+
</MudListItem>
145+
<MudListItem T="string" Icon="@Icons.Material.Filled.AccountTree">
146+
For each answer option in Multiple Choice, Select All That Apply, or True/False questions, select which group should be shown next when that option is chosen.
147+
</MudListItem>
148+
<MudListItem T="string" Icon="@Icons.Material.Filled.Visibility">
149+
Use the visual branching diagram to see the flow of your survey at a glance.
150+
</MudListItem>
151+
</MudList>
152+
153+
<MudText Typo="Typo.h3" Class="mb-2 mt-4">Which Question Types Support Branching?</MudText>
154+
<MudList T="string">
155+
<MudListItem T="string" Icon="@Icons.Material.Filled.CheckCircle">
156+
<strong>Multiple Choice:</strong> Branch based on which option the respondent selects. Each option can lead to a different group.
157+
</MudListItem>
158+
<MudListItem T="string" Icon="@Icons.Material.Filled.CheckCircle">
159+
<strong>Select All That Apply:</strong> Branch based on selected options. If multiple options with different branches are selected, all corresponding groups will be shown.
160+
</MudListItem>
161+
<MudListItem T="string" Icon="@Icons.Material.Filled.CheckCircle">
162+
<strong>True/False:</strong> Branch to different groups based on whether the respondent answers True or False.
163+
</MudListItem>
164+
<MudListItem T="string" Icon="@Icons.Material.Filled.Cancel">
165+
<strong>Text:</strong> Text questions <strong>cannot be used for branching</strong> since they contain free-form text with no predefined answers.
166+
</MudListItem>
167+
<MudListItem T="string" Icon="@Icons.Material.Filled.Info">
168+
<strong>Rating 1-10:</strong> Rating questions currently do not support branching but can be placed in any question group.
169+
</MudListItem>
170+
</MudList>
171+
172+
<MudText Typo="Typo.h3" Class="mb-2 mt-4">Understanding Last Questions</MudText>
173+
<MudText Typo="Typo.body1" Class="mb-2">
174+
<strong>Last Questions</strong> are a special type of question that always appear at the very end of the survey, regardless of the branching path taken.
175+
</MudText>
176+
<MudList T="string">
177+
<MudListItem T="string" Icon="@Icons.Material.Filled.LastPage">
178+
Last Questions <strong>must be in the Default Group (Group 0)</strong>.
179+
</MudListItem>
180+
<MudListItem T="string" Icon="@Icons.Material.Filled.Block">
181+
You <strong>cannot branch from a question marked as a Last Question</strong>.
182+
</MudListItem>
183+
<MudListItem T="string" Icon="@Icons.Material.Filled.Schedule">
184+
Last Questions are shown <strong>after all other questions</strong>, including questions from branched groups.
185+
</MudListItem>
186+
<MudListItem T="string" Icon="@Icons.Material.Filled.Info">
187+
Use Last Questions for demographic information, feedback requests, or follow-up items that should be answered by all respondents regardless of their survey path.
188+
</MudListItem>
189+
<MudListItem T="string" Icon="@Icons.Material.Filled.Edit">
190+
Mark a question as a Last Question when creating or editing it in the question editor.
191+
</MudListItem>
192+
</MudList>
193+
194+
<MudText Typo="Typo.h3" Class="mb-2 mt-4">Survey Flow with Branching</MudText>
195+
<MudText Typo="Typo.body1" Class="mb-2">Understanding how surveys flow with branching helps you design effective surveys:</MudText>
196+
<ol style="margin-left: 24px; margin-top: 16px;">
197+
<li style="margin-bottom: 12px;">
198+
<strong>Step 1:</strong> Respondents start with questions from the <strong>Default Group (Group 0)</strong>, except those marked as Last Questions.
199+
</li>
200+
<li style="margin-bottom: 12px;">
201+
<strong>Step 2:</strong> When a respondent answers a question with branching logic (e.g., selects an option that branches to Group 2), that group is queued to be shown.
202+
</li>
203+
<li style="margin-bottom: 12px;">
204+
<strong>Step 3:</strong> After completing all Default Group questions (except Last Questions), the survey shows questions from the branched groups in numerical order (e.g., Group 1, then Group 2, etc.).
205+
</li>
206+
<li style="margin-bottom: 12px;">
207+
<strong>Step 4:</strong> Branched groups may contain their own branching logic, leading to additional groups being shown.
208+
</li>
209+
<li style="margin-bottom: 12px;">
210+
<strong>Step 5:</strong> After all regular and branched group questions are answered, <strong>Last Questions</strong> from the Default Group are shown.
211+
</li>
212+
<li style="margin-bottom: 12px;">
213+
<strong>Step 6:</strong> The respondent submits the survey.
214+
</li>
215+
</ol>
216+
217+
<MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="mt-4">
218+
<MudText Typo="Typo.h6" Class="mb-2">Example Survey Flow</MudText>
219+
<MudText Typo="Typo.body2">
220+
Imagine a home renovation survey:
221+
<ul style="margin-top: 8px;">
222+
<li><strong>Default Group:</strong> "Do you own or rent your home?" (Multiple Choice: Own → Group 1, Rent → Group 2)</li>
223+
<li><strong>Group 1 (Homeowner Questions):</strong> "What renovations have you completed?" → "What is your budget?"</li>
224+
<li><strong>Group 2 (Renter Questions):</strong> "Have you requested improvements from your landlord?"</li>
225+
<li><strong>Last Question (Default Group):</strong> "Would you like to receive our newsletter?" (Shown to everyone at the end)</li>
226+
</ul>
227+
</MudText>
228+
<MudText Typo="Typo.body2" Class="mt-2">
229+
Homeowners see: Default question → Group 1 questions → Last Question<br/>
230+
Renters see: Default question → Group 2 questions → Last Question
231+
</MudText>
232+
</MudAlert>
233+
234+
<MudText Typo="Typo.h3" Class="mb-2 mt-4">Best Practices for Branching</MudText>
235+
<MudList T="string">
236+
<MudListItem T="string" Icon="@Icons.Material.Filled.Lightbulb">
237+
<strong>Keep it simple:</strong> Start with basic branching and add complexity gradually. Too many branches can confuse respondents.
238+
</MudListItem>
239+
<MudListItem T="string" Icon="@Icons.Material.Filled.Label">
240+
<strong>Use descriptive group names:</strong> Instead of "Group 1", use names like "Product Users" or "New Customers" to make your logic clear.
241+
</MudListItem>
242+
<MudListItem T="string" Icon="@Icons.Material.Filled.Preview">
243+
<strong>Test your survey:</strong> Use the Preview mode to test different answer paths before publishing.
244+
</MudListItem>
245+
<MudListItem T="string" Icon="@Icons.Material.Filled.ViewList">
246+
<strong>Plan your flow:</strong> Sketch out your branching logic on paper or in a diagram before configuring it in SurveyShark.
247+
</MudListItem>
248+
<MudListItem T="string" Icon="@Icons.Material.Filled.QuestionMark">
249+
<strong>Ensure all paths work:</strong> Make sure every possible answer combination leads to a logical conclusion and survey submission.
250+
</MudListItem>
251+
<MudListItem T="string" Icon="@Icons.Material.Filled.FolderSpecial">
252+
<strong>Use Last Questions wisely:</strong> Reserve Last Questions for universal items that every respondent should answer, regardless of their path through the survey.
253+
</MudListItem>
254+
</MudList>
255+
256+
<MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Class="mt-4">
257+
<strong>Important Note:</strong> When branching is configured, respondents see questions one at a time with Previous/Next navigation buttons. Without branching, all questions appear on a single page. This provides a focused experience for complex, branching surveys.
258+
</MudAlert>
259+
</MudPaper>
260+
</section>

0 commit comments

Comments
 (0)