Custom components

Here's a step-by-step example on how to create a custom component.

This feature is intended to Moodle administrators, not to content creators.

Step 1

Go to Site administration → Plugins → Text editors → TinyMCE editor → Components for Learning (C4L) and then click on the Custom Components section.

Step 2

Select the value 1 in the customcompcount field and press the Save changes button; by doing this, all the necessary fields to create our first custom component will appear on the screen.

Step 3

First, we will place our component's CSS classes in the custompreviewcss field. The CSS classes we add in this field will allow us to view our components within the Tiny editor when we are in edit mode.

.askchatgpt {
  font-family: sans-serif;
  position: relative;
  margin-left: 24px;
  max-width: 75%;
}

.askchatgpt-container {
  background-color: #EFECFF;
  display: flex;
  flex-direction: column;
  padding: 36px 48px 36px 72px;
  border-radius: 12px;
}

.askchatgpt h1, h2 {
  color: #543ECC;
  margin-top: 0;
  margin-bottom: 0;
}

.askchatgpt h1 {
  font-size: 18px;
  margin-bottom: 12px;
}

.askchatgpt h2 {
  font-size: 16px;
}

.askchatgpt-area {
  color: #000;
  background-color: #fff;
  padding: 18px 24px;
  border-radius: 6px;
  margin-bottom: 36px;
}

.askchatgpt-reflect {
  margin-bottom: 0;
}

.askchatgpt-icon {
  height: 68px;
  width: 68px;
  position: absolute;
  top: 12px;
  left: -20px;
  border-radius: 6px;
  transform: rotate(-8deg);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
}

Step 4

Upload to the customimagesbank field the image meant to appear within our component.

Step 5

Click on the customcompenable1 option to activate our component. This field allows us to enable or disable the components we have created.

Step 6

In the customcompname1 field, enter the text ChatGPT. This field allows us to set the text that will appear on the button of our component - 15 characters maximum."

Step 7

In the customcompicon1 field, upload the icon that will appear on the button of our component. If we do not have an icon, the system will automatically assign one.

Step 8

In the customcomptext1 field, enter the text that will be used as a 'placeholder' in the component.

What’s the best way to know if an animal is a mammal?

Step 9

In the customcompcode1 field, enter the component's HTML code.

<div class="askchatgpt {{CUSTOMCLASS}}">
  <div class="askchatgpt-icon"><img src="{{chatgpt-component.svg}}"></div>
  <div class="askchatgpt-container">
    <h1>Ask ChatGPT</h1>
    <div class="askchatgpt-question">
      <p class="askchatgpt-area">{{PLACEHOLDER}}</p>
    </div>
    <h2>Think about the answer</h2>
    <p class="askchatgpt-reflect">Is it determinist? How can you tell?</p>
  </div>
</div>

Here's some special elements that appear in the previous HTML code snipped:

• {{CUSTOMCLASS}} - Mandatory in order for the component to actually work.

• {{chatgpt-component.svg}} - The images added in the Step 5.

• {{PLACEHOLDER}} - The text included in the Step 9.

Step 10

Activate the variants by clicking the customcompvariant1 option. Custom components can only use the full width variant.

Step 11

In the customcompsortorder1 field, enter the value 1. This parameter allows us to display the components in the order that suits us best. Components with smaller numbers will appear first.

Step 12

Press the Save changes button to save your changes.

Step 13

Check that the created component appears within the C4L plugin's Custom tab.

Step 14

In order for the components to be displayed correctly outside the Tiny editor, we must also copy the same CSS classes we used in Step 3 into Site administration → Appearance → Additional HTML → Within HEAD (the additionalhtmlhead field). Your CSS must be wrapped inside of a <style></style> tag (both opening and closing tags), in order to generate valid HTML code. Save the changes by pressing the Save changes button.