What is SchoolYourself XBlock? ############################## This XBlock allows course creators to embed and display SchoolYourself content on the edX platform. This XBlock displays an icon and some text, which the learner clicks on to open a modal dialog, which shows the actual lesson in an iframe. The following screenshot shows an example of a SchoolYourself lesson added into a course: .. image:: ../../_assets/sy_lesson.png :width: 500px :align: center :alt: This image shows an example of a schoolyourself_lesson XBlock. If a learner clicks on the lesson, they will see the following modal: .. image:: ../../_assets/sy_modal.png :width: 500px :align: center :alt: This image shows an example of a schoolyourself_lesson XBlock. What are the benefits of using SchoolYourself XBlock? ***************************************************** - **Interactive Learning:** SchoolYourself offers interactive lessons and tutorials in math subjects. These interactive elements can help engage learners and make the learning process more enjoyable and effective. - **Engaging Content:** SchoolYourself uses multimedia elements such as videos, interactive simulations, and quizzes to make learning more engaging and effective. - **Flexibility for Educators:** For educators, platforms like SchoolYourself can provide tools to create and manage online courses and customize content to suit their teaching objectives. - **Accessibility:** SchoolYourself offers free and unlimited access to unique interactive math lessons ranging from algebra, geometry, and trigonometry to precalculus and calculus. How to implement SchoolYourself XBlock? *************************************** **Step 1:** Go to Studio. Remember, you can access it through the link in your `ECC account `_ or by going to `studio.edunext.co `_ and signing in with your email and password. **Step 2:** Open the course where you will add the SchoolYourself XBlock. **Step 3:** Click on the **Settings** tab and select the **Advanced Settings** option. .. image:: ../../_assets/advanced-settings.png :width: 500px :align: center :alt: This image shows where the Setting tab and the Advances Setting option are. **Step 4:** In the section **Advanced Module List**, add ``schoolyourself_lesson`` between the square brackets. .. code-block:: json [ "schoolyourself_lesson" ] .. note:: Add the XBlock command with an indented space without any space before or after quotation marks, as shown in the example above, to avoid execution errors. **Step 5:** At the bottom of the screen, click on **Save Changes**. .. image:: ../../_assets/sy_advanced_module.png :width: 500px :align: center :alt: This image shows the SchoolYourself XBlock code in the Advanced Module List and the save button. **Step 6:** After this, the XBlock should be available, so click the **Content** tab and select the **Outline** option to get back to the course content. .. image:: ../../_assets/content_outline.png :width: 500px :align: center :alt: This image shows the Content tab and the Outline option. **Step 7:** Under Outline, go to the section, then the subsection, and finally to the unit or page where you want to add the SchoolYourself XBlock. **Step 8:** Once you are there, click **Advanced Component** in the **Add New Component** bar. .. image:: ../../_assets/advanced_component.png :width: 500px :align: center :alt: This image shows the Advanced Component in the Add New Component bar. **Step 9:** You will see a list of all the advanced components added to your course. Click on **schoolyourself_lesson**. The system will add the component immediately to the unit. .. image:: ../../_assets/sy_option.png :width: 500px :align: center :alt: This image shows the SchoolYourself XBlock option in the list. **Step 10:** Click the **Edit** option to configure the XBlock as needed. .. image:: ../../_assets/sy_edit.png :width: 500px :align: center :alt: This image shows the Edit button. **Step 11**: The editor window is going to open. Here you will find several options to set up the XBlock as needed. The principal options that you have to edit are: - **Lesson ID**: The value that you will add here can be found from the URL of a SchoolYourself lesson. Here is an example of SchoolYourself URL: schoolyourself.org/learn/**algebra/number_line** The highlighted part would be the Lesson ID. .. image:: ../../_assets/sy_lessonid.png :width: 500px :align: center :alt: This image shows the Lesson ID. - **Lesson title:** You can add the title of the lesson here. - **Description:** You can add the description of the lesson here. - **Shared key:** You can leave this empty. - **Base URL:** This should be set to **https://schoolyourself.org**. - **Partner ID:** This should be set to **edx**. **Step 12:** Finish the configuration of the component and click on the **Save** at the bottom of editing window. **Step 13:** **Publish** the unit and check how your new component looks on its final version by clicking the **View Live Version** button. .. image:: ../../_assets/sy_publish.png :width: 500px :align: center :alt: This image shows the Publish button and the View Live Version button. .. seealso:: To browse available lessons from SchoolYourself, visit `this website `_. You may also visit our `demo site `_ where you can find an example of the SchoolYourself XBlock.