| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: "Course cards"
|
|
|
4 |
description: "Course cards are easy to access clickable components used in collections to navigate to the course home page."
|
|
|
5 |
date: 2020-01-14T16:32:24+01:00
|
|
|
6 |
draft: false
|
|
|
7 |
weight: 20
|
|
|
8 |
toc: true
|
|
|
9 |
tags:
|
|
|
10 |
- Available
|
|
|
11 |
---
|
|
|
12 |
|
|
|
13 |
## How to use course cards
|
|
|
14 |
|
|
|
15 |
Course cards are rendered using a shared template found in `course/templates/coursecard.mustache`. They are loaded throught JavaScript or PHP on pages like the user dashboard.
|
|
|
16 |
|
|
|
17 |
Course cards should always contain an image, if no image is provided by the backend a placeholder image is used. The card image and title should be clickable and should always link you to a course page.
|
|
|
18 |
|
|
|
19 |
Course cards should always show
|
|
|
20 |
|
|
|
21 |
* Course image
|
|
|
22 |
* Course full name
|
|
|
23 |
* Course category
|
|
|
24 |
* If a course is favourited
|
|
|
25 |
|
|
|
26 |
## Example
|
|
|
27 |
|
|
|
28 |
{{< mustache template="core_course/view-cards">}}
|
|
|
29 |
{
|
|
|
30 |
"courses": [
|
|
|
31 |
{
|
|
|
32 |
"viewurl": "https://moodlesite/course/view.php?id=2",
|
|
|
33 |
"courseimage": "https://placekitten.com/300/500",
|
|
|
34 |
"fullname": "Mathematics Year One",
|
|
|
35 |
"isfavourite": true,
|
|
|
36 |
"coursecategory": "Category 1",
|
|
|
37 |
"showcoursecategory": true,
|
|
|
38 |
"visible": true
|
|
|
39 |
}
|
|
|
40 |
]
|
|
|
41 |
}
|
|
|
42 |
{{< /mustache >}}
|
|
|
43 |
|
|
|
44 |
## Sources
|
|
|
45 |
|
|
|
46 |
A deck of course cards:
|
|
|
47 |
`core_course/view-cards.mustache`
|
|
|
48 |
|
|
|
49 |
A single card:
|
|
|
50 |
`course/templates/coursecard.mustache`
|
|
|
51 |
|
|
|
52 |
## Exporter
|
|
|
53 |
The data structure for course cards are provided by the exporter class:
|
|
|
54 |
`course/classes/external/course_summary_exporter.php`
|
|
|
55 |
|
|
|
56 |
## Usage
|
|
|
57 |
|
|
|
58 |
Course cards can be used in any place that lists courses, it helps users quickly scan the available content and find a course based on the remembered course image or the course name. Guidelines for using course cards are:
|
|
|
59 |
|
|
|
60 |
* Keep them simple
|
|
|
61 |
* Minimize the number of actions on a card
|
|
|
62 |
* Use images smartly
|
|
|
63 |
|
|
|
64 |
The example below show a deck of cards as used on the starred courses block
|
|
|
65 |
|
|
|
66 |
{{< mustache template="core_course/view-cards" >}}
|
|
|
67 |
{
|
|
|
68 |
"courses": [
|
|
|
69 |
{
|
|
|
70 |
"viewurl": "https://moodlesite/course/view.php?id=2",
|
|
|
71 |
"courseimage": "https://placekitten.com/300/500",
|
|
|
72 |
"fullname": "Mathematics Year One",
|
|
|
73 |
"isfavourite": true,
|
|
|
74 |
"coursecategory": "Category 1",
|
|
|
75 |
"showcoursecategory": true,
|
|
|
76 |
"visible": true
|
|
|
77 |
},
|
|
|
78 |
{
|
|
|
79 |
"viewurl": "https://moodlesite/course/view.php?id=3",
|
|
|
80 |
"courseimage": "https://placekitten.com/330/500",
|
|
|
81 |
"fullname": "Health and Safety",
|
|
|
82 |
"isfavourite": false,
|
|
|
83 |
"coursecategory": "Business",
|
|
|
84 |
"showcoursecategory": true,
|
|
|
85 |
"visible": true
|
|
|
86 |
},
|
|
|
87 |
{
|
|
|
88 |
"viewurl": "https://moodlesite/course/view.php?id=4",
|
|
|
89 |
"courseimage": "https://placekitten.com/360/500",
|
|
|
90 |
"fullname": "French Advanced",
|
|
|
91 |
"isfavourite": false,
|
|
|
92 |
"coursecategory": "Languages",
|
|
|
93 |
"showcoursecategory": true,
|
|
|
94 |
"visible": true
|
|
|
95 |
},
|
|
|
96 |
{
|
|
|
97 |
"viewurl": "https://moodlesite/course/view.php?id=4",
|
|
|
98 |
"courseimage": "https://placekitten.com/360/400",
|
|
|
99 |
"fullname": "French Year one",
|
|
|
100 |
"isfavourite": false,
|
|
|
101 |
"coursecategory": "Languages",
|
|
|
102 |
"showcoursecategory": true,
|
|
|
103 |
"visible": true
|
|
|
104 |
}
|
|
|
105 |
]
|
|
|
106 |
}
|
|
|
107 |
{{< /mustache >}}
|
|
|
108 |
|
|
|
109 |
|
|
|
110 |
## Placeholder images
|
|
|
111 |
|
|
|
112 |
Cards usually don't really look great without images. That's why we show a placeholder image when no course image is provided. Placeholder images are rendered in core using a library that generates a uniqueish svg's from idnumbers.
|
|
|
113 |
|
|
|
114 |
{{< php >}}
|
|
|
115 |
$OUTPUT->get_generated_image_for_id($id);
|
|
|
116 |
{{< /php >}}
|
|
|
117 |
|
|
|
118 |
{{< example show_markup="false">}}
|
|
|
119 |
<div class="card-deck">
|
|
|
120 |
{{< root.inline >}}
|
|
|
121 |
{{- $pl1 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-1.txt" -}}
|
|
|
122 |
{{- $pl2 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-2.txt" -}}
|
|
|
123 |
{{- $pl3 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-3.txt" -}}
|
|
|
124 |
{{- $pl4 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-4.txt" -}}
|
|
|
125 |
{{- $pl5 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-5.txt" -}}
|
|
|
126 |
{{- $pl6 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-6.txt" -}}
|
|
|
127 |
{{- $pl7 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-7.txt" -}}
|
|
|
128 |
{{- $pl8 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-8.txt" -}}
|
|
|
129 |
{{- $pl9 := readFile "admin/tool/componentlibrary/content/static/moodle/components/coursecards/placeholder-9.txt" -}}
|
|
|
130 |
|
|
|
131 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl1 -}}')">
|
|
|
132 |
</div>
|
|
|
133 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl2 -}}')">
|
|
|
134 |
</div>
|
|
|
135 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl3 -}}')">
|
|
|
136 |
</div>
|
|
|
137 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl4 -}}')">
|
|
|
138 |
</div>
|
|
|
139 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl5 -}}')">
|
|
|
140 |
</div>
|
|
|
141 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl6 -}}')">
|
|
|
142 |
</div>
|
|
|
143 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl7 -}}')">
|
|
|
144 |
</div>
|
|
|
145 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl8 -}}')">
|
|
|
146 |
</div>
|
|
|
147 |
<div class="card mb-2 justify-content-center align-items-center d-flex text-center" style="flex: 0 0 20%; height: 150px; background-image: url('{{- $pl9 -}}')">
|
|
|
148 |
</div>
|
|
|
149 |
{{< /root.inline >}}
|
|
|
150 |
</div>
|
|
|
151 |
{{< /example >}}
|