Merge branch 'v3' of https://github.com/uzh-bf/klicker-uzh into v3-ne…

…w-elements
uzh-bf · Jan 7, 2025 · b7dd5b3 · b7dd5b3
2 parents 2cac9a0 + 685ef67
commit b7dd5b3
Show file tree

Hide file tree

Showing 269 changed files with 1,159 additions and 589 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.3.0-alpha.18](https://github.com/uzh-bf/klicker-uzh/compare/v3.3.0-alpha.17...v3.3.0-alpha.18) (2025-01-06)
+
+
+### Bug Fixes
+
+* **apps/frontend-pwa:** resolve issue with wrong updates when voting on feedback responses ([#4431](https://github.com/uzh-bf/klicker-uzh/issues/4431)) ([c350ca5](https://github.com/uzh-bf/klicker-uzh/commit/c350ca569ff53d7918c753c677b2a9a6bae99b90))
+
+
+### Enhancements
+
+* **apps/docs:** extend documentation and restructure static folder ([#4436](https://github.com/uzh-bf/klicker-uzh/issues/4436)) ([c399e25](https://github.com/uzh-bf/klicker-uzh/commit/c399e258d1eb361957a287a860023302da2e28eb))
+* **apps/frontend-manage:** implement subscription for pinned feedbacks on live quiz lecturer view ([#4434](https://github.com/uzh-bf/klicker-uzh/issues/4434)) ([ca0fe30](https://github.com/uzh-bf/klicker-uzh/commit/ca0fe30aa8e5174f75712c6eee4e8aa741ff095b))
+* **apps/frontend-manage:** make sure that live quiz deletion workflow is consistent with other deletions ([#4433](https://github.com/uzh-bf/klicker-uzh/issues/4433)) ([60c0768](https://github.com/uzh-bf/klicker-uzh/commit/60c076819df9e8e611880dce825a447bdfe53332))
+* change published microlearning state to ended after end date and time ([#4435](https://github.com/uzh-bf/klicker-uzh/issues/4435)) ([e1612d6](https://github.com/uzh-bf/klicker-uzh/commit/e1612d65d87929edf00362e856c092f5e48eac0e))
+
 ## [3.3.0-alpha.17](https://github.com/uzh-bf/klicker-uzh/compare/v3.3.0-alpha.16...v3.3.0-alpha.17) (2025-01-03)
 
 

diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 `klicker-uzh` is the code repository of the [KlickerUZH](https://www.klicker.uzh.ch/) open-source audience interaction platform. KlickerUZH is developed by the Teaching Center of the Department of Finance at the University of Zurich, Switzerland.
 
-![Klicker Screenshot Timeline](apps/docs/static/img/question_pool_mac.png)
+![Klicker Screenshot Timeline](apps/docs/static/img/readme/question_pool_mac.png)
 
 KlickerUZH v3.0 uses multiple different web applications and services, which communicate with each other:
 

diff --git a/apps/auth/package.json b/apps/auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klicker-uzh/auth",
-  "version": "3.3.0-alpha.17",
+  "version": "3.3.0-alpha.18",
   "license": "AGPL-3.0",
   "dependencies": {
     "@klicker-uzh/i18n": "workspace:*",

diff --git a/apps/backend-docker/package.json b/apps/backend-docker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@klicker-uzh/backend-docker",
-  "version": "3.3.0-alpha.17",
+  "version": "3.3.0-alpha.18",
   "license": "AGPL-3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/apps/docs/docs/gamification/experience.mdx b/apps/docs/docs/gamification/experience.mdx
@@ -24,7 +24,7 @@ These two formulas are modular and allow for easy tuning through constants, whic
   <img
     style={{ width: 800 }}
     alt="Levels (x) vs. Experience Points (y)"
-    src="/img_v3/23_xp_vs_level.jpg"
+    src="/img/gamification/xp_vs_level.jpg"
   />
 </div>
 

diff --git a/apps/docs/docs/gamification/grading_logic.mdx b/apps/docs/docs/gamification/grading_logic.mdx
@@ -36,7 +36,7 @@ $$
   <img
     style={{ width: 600 }}
     alt="MC Grading Logic Illustration"
-    src="/img_v3/19_MC_awarded_points.svg"
+    src="/img/gamification/MC_awarded_points.svg"
   />
 </div>
 
@@ -54,7 +54,7 @@ $$
   <img
     style={{ width: 600 }}
     alt="KPRIM Grading Logic Illustration"
-    src="/img_v3/20_KPRIM_awarded_points.svg"
+    src="/img/gamification/KPRIM_awarded_points.svg"
   />
 </div>
 
@@ -78,12 +78,12 @@ The corresponding resulting point curves for correct and wrong answers during li
   <img
     style={{ width: 600 }}
     alt="Illustration of Grading in Live Quizzes"
-    src="/img_v3/21_live_quiz_awarded_points.svg"
+    src="/img/gamification/live_quiz_awarded_points.svg"
   />
 </div>
 
 ### Advanced: Customized Grading
 
 For advanced use cases, it is also possible to customized the grading logic applied during live quizzes. Through a dedicated modal for advanced settings, which can be opened after selecting a gamified course, you can now choose a custom number of maximum bonus points and a custom duration for these to fade over time. A side-by-side illustration indicates the points awarded for a correct answer over time.
 
-![Advanced settings modal for customized point distribution](/img_v3/22_live_quiz_customized_grading.png)
+![Advanced settings modal for customized point distribution](/img/gamification/live_quiz_customized_grading.png)
diff --git a/apps/docs/docs/student_tutorials/course_leaderboard.mdx b/apps/docs/docs/student_tutorials/course_leaderboard.mdx
@@ -4,12 +4,12 @@ title: Courses and Leaderboards
 
 After a student has created a **KlickerUZH account** and joined a course as outlined in the [account section](/student_tutorials/student_accounts), they can access all available course-related resources. To participate in the **leaderboard** and other course challenges and collect **points** themselves, students must actively join a leaderboard as shown below.
 
-![Student view of course before joining a leaderboard](/img_v3/03_join_leaderboard.png)
+![Student view of course before joining a leaderboard](/img/leaderboard/join_leaderboard.png)
 
 The leaderboard shows the current **ranking** of all participating students in the course. The ranking is based on the total number of points collected by the participants. The leaderboard is only visible to students who have joined it. By clicking on other participants, further information like their **level**, **experience points**, and **achievements** can be shown, if they agreed to that information being visible in the scope of the course.
 
-![Student view of course after joining a leaderboard](/img_v3/04_leaderboard.png)
+![Student view of course after joining a leaderboard](/img/leaderboard/joined_leaderboard.png)
 
 Lecturers can specify **challenges**, set **prizes**, and define **custom achievements** for the course. The leaderboard is a great way to motivate students to participate in the course and to reward them for their efforts. It represents one of the backbones of the **gamification concept** of KlickerUZH.
 
-![Leaderboards with high point scores](/img_v3/08_gamification.png)
+![Leaderboards with high point scores](/img/leaderboard/course_leaderboard.png)
diff --git a/apps/docs/docs/student_tutorials/groups_activities.mdx b/apps/docs/docs/student_tutorials/groups_activities.mdx
@@ -10,7 +10,7 @@ Through a tab on the course page, students can either create a new group or join
 
 For larger courses or when students may not know their peers, KlickerUZH offers a **randomized group creation** feature. Students can opt to be randomly assigned to a group by selecting this option during the group formation process. The system automatically creates new groups **each day**, finalizing the process at the **group creation deadline** set by the lecturer. This ensures fair and efficient group formation, especially useful in courses with many participants. The lecturer determines the **preferred group size**, and KlickerUZH strives to adhere to this size as much as possible when creating random groups. Students who find themselves alone in a group or remain unassigned at the deadline are automatically redistributed to ensure balanced group sizes.
 
-![Group Activity in Mobile View](/img_v3/10_group_overview.png)
+![Group Activity in Mobile View](/img/group/group_student_view.png)
 
 ## Solve a Group Activity
 
@@ -34,10 +34,10 @@ Once a group activity is **published**, students can access it from the course o
 
 Please note that each group can only submit their answers once. After a successful submission, all group members will be able to see the **submitted answers** and **grading decisions** (once available) through their own account.
 
-![Group Activity Student View](/img_v3/15_group_activity_student_view.png)
+![Group Activity Student View](/img/group_activity/ga_student_view.png)
 
 ## View Group Activity Results
 
 After the group activity has ended and the lecturer has finalized the grading process, students can view the **results** of the group activity. On the evaluation view, students will be able to see **all hints** (not only their assigned ones) and the provided **feedbacks and points** as shown below. Answers will automatically be categorized into correct (full points), partially correct (partial points) and incorrect (no points).
 
-![Group Activity Evaluation](/img_v3/16_group_activity_graded_students.png)
+![Group Activity Evaluation](/img/group_activity/ga_graded_students.png)
diff --git a/apps/docs/docs/student_tutorials/live_quiz.mdx b/apps/docs/docs/student_tutorials/live_quiz.mdx
@@ -6,15 +6,15 @@ Live quizzes are one of the core functionalities of KlickerUZH. In the following
 
 #### Polls and Live Quizzes
 
-![Live Quiz _on the left_](/img_v3/06_live_quiz.png)
+![Live Quiz _on the left_](/img/live_quiz/lq_student_view.png)
 
 During the lecture, students have the possibility to answer the questions asked by the lecturers on `https://pwa.klicker.uzh.ch/join/{shortname}` or in the KlickerUZH app (or, if available, in OLAT under the "Live Quiz" module). The results are displayed graphically without delay on the **evaluation view** and can thus be presented and commented on by the lecturers after the answering time has expired.
 
 **No login is required** to answer the questions. With a login students can participate in the challenge of your course and collect points.
 
 #### Live Q&A and Real-time Feedback
 
-![Live Q&A and Real-time Feedback _on the right_](/img_v3/06_live_quiz.png)
+![Live Q&A and Real-time Feedback _on the right_](/img/live_quiz/lq_student_view.png)
 
 If students have a question or would like to give direct feedback on the lecture, the **Live Q&A** offers the possibility to ask the lecturers or teaching assistants a question directly during the lecture - even if a student is participating in the lecture remotely. In addition, KlickerUZH also offers the possibility to provide **direct feedback** to the lecturers on the **speed** and **difficulty** of the lecture during the lecture.
 

diff --git a/apps/docs/docs/student_tutorials/microlearning.mdx b/apps/docs/docs/student_tutorials/microlearning.mdx
@@ -3,7 +3,7 @@ title: Microlearning
 ---
 
 <img
-  src="/img_v3/09_microlearning.png"
+  src="/img/microlearning/ml_student_view.png"
   alt="Microlearning in Mobile View"
   width="200"
   style={{ float: 'right', marginLeft: '3rem' }}

diff --git a/apps/docs/docs/student_tutorials/practice_quiz.mdx b/apps/docs/docs/student_tutorials/practice_quiz.mdx
@@ -2,7 +2,7 @@
 title: Practice Quiz
 ---
 
-![Practice Quiz in OLAT](/img_v3/07_practice_quiz.png)
+![Practice Quiz in OLAT](/img/practice_quiz/pq_olat_view.png)
 
 Beyond the setting of live quizzes, KlickerUZH also offers a variety of asynchronous learning activities. One of them is the **practice quiz**. Practice quizzes are a great way to **repeat** the course content and to prepare for an exam. This section describes the **student view** of practice quiz elements, to create them, check out the [corresponding section](/tutorials/practice_quiz).
 

diff --git a/apps/docs/docs/student_tutorials/student_accounts.mdx b/apps/docs/docs/student_tutorials/student_accounts.mdx
@@ -10,7 +10,7 @@ Depending on the technical set up of the course, students can proceed as follows
 
 Open the KlickerUZH module in the **OLAT course** of the lecture. To manage their KlickerUZH account or create a new one, students should click on **"Manage account"** within the KlickerUZH module.
 
-![](/img_v3/01_create_account.png)
+![](/img/account/create_account.png)
 
 If students already possess a KlickerUZH account, they can simply visit any of the KlickerUZH activities in the LMS course and should be **logged in automatically**. In case they are not logged in automatically, it is possible to log in using the button on the top right.
 
@@ -19,7 +19,7 @@ If students already possess a KlickerUZH account, they can simply visit any of t
 If a student already has a KlickerUZH account (e.g., from other courses), they can open the KlickerUZH app and click **"Join course"** below the course overview. Enter the **9-digit PIN** from the lecturer's course overview. They are then automatically part of the course and can participate in all activities.
 
 <img
-  src="/img_v3/05_join_course.png"
+  src="/img/account/join_course.png"
   alt="Course Join Page through PIN"
   width="350"
 />
@@ -35,4 +35,4 @@ In general, it is also possible to participate **anonymously** in most elements
 
 After creation, students can update their **password**, **avatar** and other **settings** at any time or **delete their account** completely through a corresponding designated view. To access this view, students can simply click on their avatar in the top right corner.
 
-![](/img_v3/02_edit_profile.png)
+![](/img/account/edit_profile.png)
diff --git a/apps/docs/docs/tutorials/course_management.mdx b/apps/docs/docs/tutorials/course_management.mdx
@@ -4,7 +4,7 @@ title: Course Management
 
 ## What are courses?
 
-![Course Overview](/img_v3/course.png)
+![Course Overview](/img/courses/course_overview.png)
 
 Courses serve as a framework within KlickerUZH, facilitating the integration of learning activities into a structured lecture format. They enable lecturers to effectively manage various activities and challenges over a specific period, whether it's a semester or another defined timeframe.
 
@@ -78,7 +78,7 @@ This process helps ensure that groups are formed **fairly and efficiently**. The
 
 2. Have students select **randomized group assignment**: Students can opt to be randomly assigned to a group by selecting the option during the group formation process in the student app.
 
-![Random Group Creation - Student View](/img_v3/17_random_groups_student.png)
+![Random Group Creation - Student View](/img/group/random_groups_student.png)
 
 3. **Automatic group creation** during the creation period: Groups are created automatically every day, as long as there are at least twice the number of students as the preferred group size in the pool. The **preferred group size** is determined during course creation and cannot be modified later. KlickerUZH will try to adhere to your preferred group size as much as possible.
 
@@ -89,4 +89,4 @@ This process helps ensure that groups are formed **fairly and efficiently**. The
 
 5. **Manual group creation** during the creation period: Lecturers can manually finalize group assignments at any time through the course's **group overview page** (ahead of the group formation deadline). This allows you to use randomized group formation in a single in-class quizzes instead of across a longer timespan. To do so, you can select the "**Assign random groups**" button within the group overview on the course page (screenshot below). This will close group creation and distribute students from the pool into existing groups as described in the previous step. To reopen group formation after manual finalization, lecturers can **extend the deadline** in the course settings.
 
-![Random Group Creation - Lecturer View](/img_v3/18_random_groups_lecturer.png)
+![Random Group Creation - Lecturer View](/img/group/random_groups_lecturer.png)
diff --git a/apps/docs/docs/tutorials/delegated_access.mdx b/apps/docs/docs/tutorials/delegated_access.mdx
@@ -15,7 +15,7 @@ In order to create a delegated access login for your account, open the [user set
 Note that the username of the delegated login will be the shortname of your account and the password is auto-generated. You can generate a different password by clicking the corresponding button. In any case, the password will be displayed only once, so make sure to copy it to a safe place before closing the view.
 
 <img
-  src="/img_v3/delegated_access_settings.png"
+  src="/img/account/delegated_access_settings.png"
   alt="Delegated Access Settings"
   width="700"
 />

diff --git a/apps/docs/docs/tutorials/element_management.mdx b/apps/docs/docs/tutorials/element_management.mdx
@@ -4,7 +4,7 @@ title: Element Management
 
 ## What is an element?
 
-![Element Editor](/img_v3/question.png)
+![Element Editor](/img/elements/SC_element_editor.png)
 
 Elements serve as the fundamental building blocks of KlickerUZH. The element library builds the home screen of KlickerUZH, providing a central hub for creating and editing elements. To gain a basic understanding of the role of elements in KlickerUZH, please refer to the Core Concept - Elements and Use case section.
 

diff --git a/apps/docs/docs/tutorials/element_stacks.mdx b/apps/docs/docs/tutorials/element_stacks.mdx
@@ -0,0 +1,31 @@
+---
+title: Element Stacks
+---
+
+## What are Element Stacks / Blocks?
+
+Most KlickerUZH activities group elements into stacks or blocks. The set of elements is then either shown all at once in practice quizzes and microlearnings or sequentially in live quizzes. To supplement the set of questions in a stack, optional content elements with descriptive text can be added in between (functionality coming soon to live quizzes). Additionally, element stacks also support the definition of a title and description, which are shown to the students above the stack's content.
+
+Grouping questions together in element stacks allows creating a case study-like experience for students, where they can work through a set of questions and content elements in a structured way. The spaced repetition logic in practice quizzes is only applied to the stacks, not to the individual questions within a stack.
+
+## How can I create an Element Stack?
+
+As the last step of the creation wizard, you are asked to select the elements, which should be included in the activity. By grouping them into blocks or stacks, using the drag-and-drop interface or selecting multiple elements and using the corresponding buttons, you can create a structured activity.
+
+![Element Stack Creation](/img/stacks/stack_creation.png)
+
+<div align="center">
+  <img
+    src="/img/stacks/stack_description_title.png"
+    alt="Element Stack Title and Description"
+    width="600"
+  />
+</div>
+
+## How do Element Stacks look for Students?
+
+In asynchronous activities (practice quizzes and microlearnings), all elements of a stack are shown at once. The title and description are displayed above the content elements. In live quizzes, the elements in a block are shown sequentially, while no title or description are defined.
+
+![](/img/stacks/stack_student_view.png)
+
+In asynchronous activities, students additionally have the possibility to flag elements for mistakes or vote on them. This feedback is then visible to the instructor in the activity's analytics and can be used to improve the quality of the questions.