# Reflection

## What is a Reflection?

A **reflection** is a feedback form, used to collect opinions and suggestions from course learners about their experiences. 

A reflection element helps course creators understand learners' satisfaction, identify areas for improvement, and make data-driven decisions to enhance course data and overall performance. 

This element is also suitable for educational purposes. It can be used for more complex assignments, such as essays, extended answers, or additional questions.

{% hint style="info" %}
Learners responses are stored in the cmi interaction analytics in the LMS, where course authors or methodologists can review them.
{% endhint %}

## Set a Reflection Branding

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FZLRi9EiK1QiQ4VRhounn%2FCourse_loading_page.01.png?alt=media&#x26;token=c5570bca-f5f7-4a1f-8a1c-fb873d66c867" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}
Go to the **Branding** tab.
{% endstep %}

{% step %}
Select a checkbox next to the branding template.
{% endstep %}

{% step %}
Select **Edit**.

A new window will appear.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FqhP2NBfPsSi2QRIbfQMM%2FReflection_Branding.02.png?alt=media&#x26;token=f66fc631-812c-408b-8075-e0fc8a40c6b0" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Go to the **Elements** tab.
{% endstep %}

{% step %}
Select **Reflection.**

A pop-up window will appear.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fwe59loC47UkfXrtrfrJE%2FReflection_Branding.03.png?alt=media&#x26;token=2df4088c-61e7-4998-9e1a-0e833ce63f58" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
[Set a reflection element brandin&#x67;**.**](#edit-reflection-branding-settings)
{% endstep %}

{% step %}
Preview the changes of the loading screen.
{% endstep %}

{% step %}
Reset the changes to default.
{% endstep %}

{% step %}
Click the **Save** button to apply the changes.
{% endstep %}
{% endstepper %}

## Edit Reflection Branding Settings

[Open](#set-a-reflection-branding) a reflection element settings window to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fa0LZqHXp5oCoBHllD1z7%2FReflection_Branding.04.png?alt=media&#x26;token=28a8e7b1-6478-45c5-96f2-5d7ea063bef5" alt=""><figcaption></figcaption></figure>

### a. Reflection Field Settings

{% stepper %}
{% step %}

### **Background** color

Set the background color of the reflection field and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Rounding

Adjust the slider or enter the percentage value inside the input window to control corner roundness of the reflection field.
{% endstep %}

{% step %}

### Display border

Click No to remove borders around the reflection field.
{% endstep %}

{% step %}

### Border color

Set the border color of the reflection field and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Thickness

Adjust the slider or enter the value from 1 to 10 inside the input window to control the border thickness of the reflection field.
{% endstep %}

{% step %}

### Hover color

Set the color that appears when users hover over the reflection field by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Focus color

Set the color that appears when users click inside the reflection field by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}
{% endstepper %}

### b. Effects

{% stepper %}
{% step %}

### Answer shadow

Click **+** to add shadow effects to the reflection field for additional visual depth and emphasis.
{% endstep %}
{% endstepper %}

### c. Download Button Settings

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F1MmHrr111OMhRvpEUSZU%2FReflection_Branding.05.png?alt=media&#x26;token=6a887fb2-ea81-43c7-bdf1-1a1f197e1221" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### **Background** color

Set the background color of the download button and its intensity by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Hover color

Set the color that appears when users hover over the download button by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Background image

Click **Upload** to add an image as the download button background.
{% endstep %}

{% step %}

### Icon color

Set the default icon of the download button by using a hex color code or selecting a shade from the palette or **Branding** color list.
{% endstep %}

{% step %}

### Height

Enter the height of the download button in pixels.
{% endstep %}

{% step %}

### Width

Enter the width of the download button in pixels.
{% endstep %}

{% step %}

### Rounding

Adjust the slider or enter the percentage value inside the input window to control corner roundness of the download button.
{% endstep %}

{% step %}

### Typography

Click to open[ common styling properties](https://help.parta.io/branding/create-branding/typography-and-fonts#common-styling-properties) settings of the text.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Remember to apply the changes via the **Save** button.
{% endhint %}