Quiz foundations & data connection #11277

nucleogenesis · 2023-09-19T18:15:27Z

Summary

Applies several changes to the root quiz creation page to closer match the Figma specs
Connects the useQuizCreation module to the UI in many places (noted below)
User can Add and remove sections
User can select a new active section (as reflected by that section's ID being shown on the page temporarily)
User can open the "edit" side panel
User can open the "select resources" side panel (by way of the "+ Add Questions" button)
The user has an intuitive flow through the side panels. The user has two paths to the "Select resources" panel. They can click "Add Questions" on the root page -- or they can click the "Select resources" button in the "Edit" panel. If they get there from the root page, they see an X to close the side panel. If they get there via the "Edit" panel, they see a back arrow to go back to the previous panel.

To be done in follow-up issues

References

Figma

Reviewer guidance

quizForge - good or not good name?
Please test deleting the last item, active items, etc
Test the side panels and note that the section ID shown should reflect which item is being edited
Navigation - browser, arrows/X's in side panels, etc

No critical testing needed here yet - this should be merged relatively quickly to unblock follow-up work.

github-actions · 2023-09-19T19:10:22Z

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b5.dev0_git.348.g274992d2.pex
Windows Installer (EXE)	kolibri-0.16.0b5.dev0+git.348.g274992d2-unsigned.exe
Debian Package	kolibri_0.16.0b5.dev0+git.348.g274992d2-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b5.dev0+git.348.g274992d2-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b5.dev0+git.348.g274992d2-0.1.0-debug.apk
TAR file	kolibri-0.16.0b5.dev0+git.348.g274992d2.tar.gz
WHL file	kolibri-0.16.0b5.dev0+git.348.g274992d2-py2.py3-none-any.whl

AllanOXDi · 2023-09-28T19:47:49Z

kolibri/plugins/coach/assets/src/composables/useQuizCreation.js

@@ -124,6 +124,13 @@ export function useQuizCreation() {
    if (updatedSections.length === get(allSections).length) {
      throw new Error(`Section with id ${section_id} not found; cannot be removed.`);
    }
+    if (updatedSections.length === 0) {
+      console.log('Deleting last section...');


I think console.log can be removed.

AllanOXDi · 2023-09-28T19:47:56Z

kolibri/plugins/coach/assets/src/composables/useQuizCreation.js

@@ -240,6 +247,10 @@ export function useQuizCreation() {
  const activeSection = computed(() =>
    get(allSections).find(s => s.section_id === get(_activeSectionId))
  );
+  /** @type {Arrayc<ComputedRef<QuizSection>>} The inactive sections */
+  const inactiveSections = computed(() =>


AllanOXDi · 2023-09-29T15:35:14Z

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionSidePanel.vue

+    watch: {
+      $route: function(_, o) {
+        this.prevRoute = o;
+        console.log('prevroute', this.prevRoute);


The same here.

AllanOXDi · 2023-09-29T15:40:59Z

kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue

@@ -491,19 +296,25 @@
 <style lang="scss"  scoped>

  .style-icon {
-    width: 2.5em;
-    height: 2.5em;


What could be the reason for not maintaining em units ? as we discussed.

Old habits die hard 😅 - will update to use em

thanksameeelian

this is all looking pretty good to me! i followed the reviewer guidance and navigated through the available components a few times, successfully added and deleted sections from the beginning, middle, and end, seeing the titles update & the ids be correct, opening the side panel, etc., and i found it was all (or nearly all) working as i expected!

i'm interested in the outcome of @AllanOXDi's comments, and the ones i'll leave here are all UX-related. i'd like to call out these concerns here to make sure they're visible, but many may be better handled in a separate, follow-up PR (or just dismissed haha)

i was thinking that if you add a new section, perhaps that section should be automatically focused? but that is just an idea/preference that can be easily rebutted by the design team or by you if you don't feel like that's the behavior you'd like :)
i think there is a little bit of focus-ring-funkiness going on, which is probably best displayed in the attached screen recording:
- when you tab through the page, the X closing button for the whole page is only visibly focused on the first pass through. if you tab back around to it again, it is focused (at the end of the video i trigger the invisibly-focused X with my keyboard and successfully close the page), but the only visual indication is the URL preview at the bottom of the window.
- the focus rings around the section names are currently displaying oddly, and when focus moves to the Edit/Delete menu-triggering button it isn't very clear - it appears that parts/sides of the outline are missing, particularly the side that abuts the next section name. the last section in the list has the most complete outline, but it is still a bit unexpected-looking

focus-indicators.mov

just a comment about something that feels weird to me, which is the appearance of hovering over a currently-selected-section's name:

i just find this visually a little odd. it makes sense that just the name would be showing as hovered/greyed, as the button beside it has a separate hover state which also makes sense, but the disconnect between the underline (of the whole containing div) and what is highlighted in the hover state keeps catching my eye. not sure if there is any possible "better" way to do it though!

nucleogenesis · 2023-09-29T17:31:53Z

i was thinking that if you add a new section, perhaps that section should be automatically focused? but that is just an idea/preference that can be easily rebutted by the design team or by you if you don't feel like that's the behavior you'd like :)

💯 for sure will update accordingly

To the rest of your comments, which I think are all due to the same weirdness of there being a <button> bonanza going on there with one big button holding two little buttons for each tab.

The wrapping is due to how the KTabs component works. I'll dive back into this and see if I can work out a way to be sure that the wrapping button is always skipped in the keyboard nav flow. I think it should just never focus the wrapping button because it isn't handled and for our cases would better be a <div>.

I'll also look at the focus ring w/ regard to the page closing X button. Thank you so much for all of your notes!

nucleogenesis · 2023-10-01T22:13:11Z

@thanksameeelian @AllanOXDi I've addressed most of the feedback here -- the main thing I haven't addressed here is the fix for the tabs. I've begun applying that fix in my ongoing work to close #11274

…ur evt

further cleaning futherfurther cleanup

AllanOXDi

The changes have been addressed !

thanksameeelian

LGTM!

so much is being introduced here & i'm so excited to see it taking shape. on top of everything else, thanks for your attention to detail & for keeping an eye on that tab issue going forward!

nucleogenesis added the TODO: needs review Waiting for review label Sep 19, 2023

nucleogenesis added this to the Kolibri 0.17: Enhanced Quiz Management milestone Sep 19, 2023

nucleogenesis requested review from thanksameeelian and AllanOXDi September 19, 2023 18:15

github-actions bot added APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) SIZE: large labels Sep 19, 2023

nucleogenesis force-pushed the feature--finalizing-create-quizz branch from 4936295 to 0651d0c Compare September 21, 2023 18:38

github-actions bot added the SIZE: very large label Sep 21, 2023

This was referenced Sep 21, 2023

Move placeholder content in SectionSidePanel to own component #11275

Closed

Build Select Resource Side Panel #11015

Closed

Use or borrow from HorizontalNavBarWithOverflow for the Section Tabs #11274

Closed

AllanOXDi requested changes Sep 29, 2023

View reviewed changes

thanksameeelian reviewed Sep 29, 2023

View reviewed changes

nucleogenesis added 14 commits October 1, 2023 15:16

remove unnecessary 85px top margin from CoachImmersivePage

e397be1

center and maxat 1000px the kpagecontainer in createquizsection

1ff04c7

polishing quiz title field & icon

f82bf10

tidy spacing on text/title field

e2c7d98

make the composable useQuizCreation the default export

546483f

provide/inject composable as quizForge - set quiz title on field bl…

1fb7229

…ur evt

remove unused resource selection

9c8490f

further cleaning futherfurther cleanup

KTabs data derived from useQuizCreation; can add sections

72f15fa

don't just go back, set the back route correctly

51af026

tabs have options; addsection focuses new section;

942457c

show unique value for each section in KTabsPanel to be sure its working

9abbe39

don't set added sections as active, let the dev do it manually

de4a574

routing for side panels fixed; hooked into actual UI

1bffa37

fix test import

2dec143

nucleogenesis added 5 commits October 1, 2023 15:16

moreclean

f8ec0d6

add new section focuses new section

978f7cb

px -> em in create quiz section

86f49dd

remove consolelog

9583c8e

remove console.log, fix jsdoc type

528fb28

nucleogenesis force-pushed the feature--finalizing-create-quizz branch from 7472252 to 528fb28 Compare October 1, 2023 22:16

AllanOXDi approved these changes Oct 3, 2023

View reviewed changes

thanksameeelian self-requested a review October 3, 2023 17:37

thanksameeelian approved these changes Oct 3, 2023

View reviewed changes

nucleogenesis merged commit fa3f140 into learningequality:develop Oct 3, 2023
34 checks passed

nucleogenesis deleted the feature--finalizing-create-quizz branch October 3, 2023 18:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Quiz foundations & data connection #11277

Quiz foundations & data connection #11277

nucleogenesis commented Sep 19, 2023

github-actions bot commented Sep 19, 2023 •

edited

Loading

AllanOXDi Sep 28, 2023

AllanOXDi Sep 28, 2023 •

edited

Loading

AllanOXDi Sep 29, 2023

AllanOXDi Sep 29, 2023

nucleogenesis Sep 29, 2023

thanksameeelian left a comment •

edited

Loading

nucleogenesis commented Sep 29, 2023

nucleogenesis commented Oct 1, 2023

AllanOXDi left a comment

thanksameeelian left a comment

Quiz foundations & data connection #11277

Quiz foundations & data connection #11277

Conversation

nucleogenesis commented Sep 19, 2023

Summary

References

Reviewer guidance

github-actions bot commented Sep 19, 2023 • edited Loading

Build Artifacts

AllanOXDi Sep 28, 2023

Choose a reason for hiding this comment

AllanOXDi Sep 28, 2023 • edited Loading

Choose a reason for hiding this comment

AllanOXDi Sep 29, 2023

Choose a reason for hiding this comment

AllanOXDi Sep 29, 2023

Choose a reason for hiding this comment

nucleogenesis Sep 29, 2023

Choose a reason for hiding this comment

thanksameeelian left a comment • edited Loading

Choose a reason for hiding this comment

nucleogenesis commented Sep 29, 2023

nucleogenesis commented Oct 1, 2023

AllanOXDi left a comment

Choose a reason for hiding this comment

thanksameeelian left a comment

Choose a reason for hiding this comment

github-actions bot commented Sep 19, 2023 •

edited

Loading

AllanOXDi Sep 28, 2023 •

edited

Loading

thanksameeelian left a comment •

edited

Loading