---
title: "Canvas | Studio | Ilmiya Documentation"
description: "Monitor students in real time — see who's online, what they're reading, and drill into individual student progress, stats, and settings."
url: "https://ilmiya.com/docs/studio/canvas/"
language: "en"
---

<a id="_top"></a>

# Canvas

The **Canvas** tab is Studio’s live student monitoring view. It lists every student in your organization with their real-time online/offline status and current reading activity. Clicking a student opens a three-tab detail view: **Quran**, **Stats**, and **Setting**.

Canvas is the live operational view for teachers and admins. Use it to:

-   See who’s actively reading or reciting right now
-   Spot students who haven’t logged in or are inactive
-   Drill into an individual student’s Quran progress, streak, and engagement
-   Override per-student settings (font, reciter, translation, difficulty) without changing organization defaults
-   Restrict or grant access to specific surahs for individual students

> **Tip**
>
> Keep Canvas open in a separate tab during class time to monitor live activity. The online/offline status updates in real time via WebSocket.

* * *

<a id="students-list"></a>

## Students List

The **Students List** is the landing view of the Canvas tab. It shows every student in your organization with live status and the surah they’re currently reading.

Click **Canvas** in the Studio navigation to load the student list. Student status updates in real time without a refresh.

<a id="status-indicators"></a>

### Status Indicators

| Indicator | Meaning |
| --- | --- |
| 🟢 Online (green) | Student is connected but not in a reading session |
| 🔵 Active (blue) | Student is in a reading session |
| 🟠 Inactive (orange) | Student is connected but idle |
| 🔴 Offline (red) | Student is offline |

<a id="search--filter"></a>

### Search & Filter

Use the **search input** at the top to find a student by username. Use the status dropdown to filter:

| Filter | Shows |
| --- | --- |
| **All** | Every student in the organization |
| **Online** | Only students who are connected but not in a reading session |
| **Active** | Only students currently in a reading session |
| **Inactive** | Only students who are connected but idle |
| **Offline** | Only students currently offline |

<a id="grid-vs-list-view"></a>

### Grid vs List View

| View | Best for |
| --- | --- |
| **List** | Detailed scan — see name, username, current surah, and status side by side |
| **Grid** | Quick visual overview — student avatars and what they’re reading |

**List view columns:**

| Column | Description |
| --- | --- |
| **Name** | Student’s display name with avatar |
| **Username** | Student’s email handle (before the @) |
| **Surah Name** | The surah they’re currently reading, plus reading mode |
| **Status** | Color-coded status dot with its label |

Click any student in either view to open their detail page with the Quran, Stats, and Setting tabs.

> **Note**
>
> Canvas only shows students that belong to your organization. You won’t see students from other organizations even if your account has access to multiple.

* * *

<a id="quran-tab"></a>

## Quran Tab

The **Quran tab** shows the complete list of Quranic surahs and lets you control which ones the student can read or recite, plus jump straight into Read, Recite, or Judge mode for any surah.

<a id="mode-buttons"></a>

### Mode Buttons

At the top of the Quran tab, three mode buttons change what happens when you click a surah:

| Mode | What it does |
| --- | --- |
| **Read mode** | Open the surah in the read template for grading |
| **Recite mode** | Open the surah in recite mode for pronunciation assessment |
| **Judge mode** | Open the surah in judge mode for live evaluation |

<a id="per-surah-access-control"></a>

### Per-Surah Access Control

Toggle **Read Access** or **Recite Access** to control which surahs a specific student can access:

| Mode | Toggle column |
| --- | --- |
| **Read mode** | Shows **Read Access** toggles |
| **Recite mode** | Shows **Recite Access** toggles |
| **Judge mode** | No access toggle shown |

When you toggle access, the switch updates immediately — no save button needed. A toast notification confirms the change.

> **Tip**
>
> Use access control to scaffold student progress — restrict access to advanced surahs until students have completed introductory ones. Per-student overrides take precedence over class-level defaults.

<a id="list-view-columns"></a>

### List View Columns

| Column | Description |
| --- | --- |
| **Number** | The surah number (1–114) |
| **Name** | Transliterated surah name — click to open in the selected mode |
| **Meaning** | Translated meaning of the surah name |
| **Place** | Makki or Madani |
| **Juz** | The juz the surah starts in |
| **Verses** | Total verse count |
| **Read/Recite Access** | Toggle to grant or restrict the student’s access |

Every column except the access toggle is sortable — click a column header to sort ascending or descending.

* * *

<a id="stats-tab"></a>

## Stats Tab

The **Stats tab** surfaces the student’s engagement and activity over time — streak, session count, total minutes spent, and a visual heatmap of when they were active.

<a id="summary-cards"></a>

### Summary Cards

| Card | What it shows |
| --- | --- |
| **Current Streak** | Number of consecutive days the student has been active. Resets after a missed day |
| **Total Sessions** | Number of distinct days with recorded activity |
| **Total Time Spent** | Cumulative minutes spent on Quran activities |
| **Total Page Views** | Number of recorded activity entries |
| **Total Listening Time** | Total recorded time, in hours |
| **Rank** | Not yet calculated — shows N/A |

<a id="time-range"></a>

### Time Range

The Stats tab shows the current year; there is no period selector yet. The ranges below exist in the code, and **This Year** is the one used:

| Period | Range |
| --- | --- |
| **This Week** | From the start of the current week to today |
| **This Month** | From the 1st of the current month to today |
| **This Year** | From January 1st of the current year to today (default) |

<a id="activity-heatmap"></a>

### Activity Heatmap

A contribution-style heatmap displays the student’s daily activity from January 1 to December 31 of the current year. Hover over a day to see the exact minutes spent.

| Color | Approximate time |
| --- | --- |
| White / no fill | 0 minutes |
| Lightest blue | 1–15 minutes |
| Light blue | 16–30 minutes |
| Medium blue | 31–45 minutes |
| Dark blue | 46–60 minutes |
| Deepest blue | More than 60 minutes |

<a id="calendar-streak-view"></a>

### Calendar Streak View

Below the heatmap is a monthly calendar showing daily progress with color-coded rings:

| Color | Meaning |
| --- | --- |
| **Red** | Up to 15 minutes |
| **Amber** | 16–30 minutes |
| **Amber** | 31–45 minutes |
| **Green** | More than 45 minutes (ring full at 60) |

> **Tip**
>
> Use streak and activity data to identify students who need re-engagement. A long zero-activity period in the heatmap is a clear signal to reach out.

> **Note**
>
> Stats data reflects time in Quran reading and recitation sessions only. Time spent browsing the catalog or viewing announcements is not included.

* * *

<a id="settings-tab"></a>

## Settings Tab

The **Settings tab** lets you override Studio’s organization defaults for a specific student — font, color, reciter, translation, tafsir, difficulty, and more.

<a id="override-control"></a>

### Override Control

| Control | Description |
| --- | --- |
| **Defaults** | Section heading for the override switch below |
| **Override student settings** | When on, your values lock the student’s view — they cannot change them |

When **Override student settings** is off, your values are the defaults but the student can adjust them from their side.

<a id="display-settings"></a>

### Display Settings

| Setting | Options |
| --- | --- |
| **Font** | Uthmani (traditional script) or Indopak (South Asian script) |
| **Font Size** | Small (18px), Medium (22px), Large (26px), Extra Large (30px) |
| **Color** | Custom hex via color picker — applies to all Arabic text the student sees |
| **Tooltip** | Toggle word tooltips on/off when the student taps or hovers on words |
| **Segment Tracing** | Visual marker that highlights the segment the student is currently reading |

<a id="learning-settings"></a>

### Learning Settings

| Setting | Description |
| --- | --- |
| **Difficulty** | On/off switch; when on, ayahs are marked with a Hard / Medium / Easy colour key |
| **Reciter** | Default reciter for audio playback in this student’s view |
| **Translation** | Language and edition (e.g. English — Yusuf Ali, Shakir, Pickthall, Maududi) |
| **Tafsir** | Quranic commentary source — Ibn Kathir, Maarif-ul-Quran, Tafseer Al-Qurtubi, and more |

All settings save automatically as you change them — a toast notification confirms each update.

> **Caution**
>
> When **Override student settings** is enabled, the student cannot change these settings themselves. Make sure your overrides match the student’s actual needs before enabling the override switch.

[Previous  
Stats Tab](https://ilmiya.com/docs/studio/canvas/stats-tab/) [Next  
Setting Tab](https://ilmiya.com/docs/studio/canvas/settings-tab/)

---

[View this page on Ilmiya](https://ilmiya.com/docs/studio/canvas/) · [All pages in Markdown](https://ilmiya.com/markdown-index.md)