---
title: Moodle Draft
tags: Miduca
---

# Moodle Draft

## Design

{%figma https://www.figma.com/proto/msJD6uYF2P1ja8ce8if0rJ/Miduca-Draft?node-id=172%3A27043&scaling=scale-down-width&page-id=171%3A23828&starting-point-node-id=171%3A27413&show-proto-sidebar=0 %}

## Course Format 1 - Cards + Accordion

### Course Overview Page

This is the first page the user sees, when he enters a course.


1. Course Title
2. Course Progress, calculated by the total number of activities
3. Course Description
4. Activity within the General Section (more in components)
5. Course Section, displayed as card. (more in components)

The card for the course section contains an image, section title, description and the section progress.

### Section Page


1. Course Title
2. Back Button (navigate back to course page)
3. Section Image
4. Progress within the section
5. Description for the section
6. Accordion to seperate activities within the section
→ the accordions can also be created by having a Label activity on top of the activities, each label would define the area, which will be displayed as accordions.

## Components

### Section Card


The section card contains an image, section title, description and if possible the progress from this sections. If no image is selected the card will display a random image (generated or predefined)

### Activity Card


The activity card contains an icon, defined for each activity type, the title of the activity, duration, and the current state.

If no completion criteria is selected nothing will be shown, if manual completion is selected, the activity shows a button with the standard string "Mark as completed", if a automatic criteria is selected, nothing will be display and checkmark after completion.

We probably going to use 3-5 different activity type, I'll provide the icons for each activity.