Make it Interactive
Learn to use widgets to make your course more interactive, and set up docker environments.
What are widgets?
Educative courses are collections of lessons on one or more related topics. Each lesson includes a combination of text, code, visuals, quizzes, and/or other interactive elements.
To write a lesson, you will be using Educative’s widgets—teaching tools that you can select in a lesson. These tools allow the user to interact with your lesson or application. For example, one of your lessons might:
- Introduce a topic
- Demonstrate executable code
- Provide an explanation of that code
- Prompt the reader to complete a coding challenge or quiz.
In that scenario, you would use a combination of Markdown, Code, and Quiz widgets.
Add a widget
The Educative platform has a diverse set of widgets to cater to all of your course creation needs. Adding a widget to your course is simply a matter of a click. In the Lesson Editor, click the plus sign( ) and a drop-down menu appears listing all of the widgets. You can now click the icon for the widget you want to use.
For more details on using individual widgets, please take a look at Educative Author’s Guide.
Take a look at the following steps:
- In the Lesson Editor, click on the plus sign to open a new widget.
- Select the widget you want to use from the drop-down menu.
Widget help
Have you run into a use-case where you want to hide some files from the user but use them in your code? Are you trying to figure out how to add hints to your solutions? Don’t worry; whatever help you need using Educative widgets, we have got it all covered!
Create Courses Using Educative’s Publishing Platform (also known as Author Guide) is a detailed guide on using different widgets and docker environments.
Quest Widget
Every reader learns at a different pace. Learners enjoy it when the instructor changes the course of learning according to their response. Educative provides the ‘Quest widget’ that introduces a 1:1 training environment with path-based content.
You can use it to:
Assess learning: By identifying common mistakes, you can adapt the content to address gaps.
Formulate coding examples: Foster better coding skills with examples for problem-solving practice.
Improve learning: Enable self-paced learning, allowing the learner to embark on their own journey.
Here's what the widget looks like:
What do I need to know?
Any text added at “Start Typing...” will be visible to readers like in a normal flow. Every button symbolizes a new path.
You can rename a button.
You can add multiple buttons at the same level.
You can add a button inside a button.
Limitation: You can add only one quest widget inside a lesson.
We have shown the examples for the use cases mentioned above.
Code execution with widgets
The best way to design a stellar course is to increase its interactivity. Capture your learner’s attention and make your lessons a two-way exercise rather than a boring monologue.
Here’s a list of five widgets to get you started on making your lessons interactive:
Code widget
Here are some ways to utilize the Code widget.
-
Make your code executable: You can choose the programming language of your choice from the available list and write code in this widget. By default, the code would not be executable. If your code contains an output, mark it executable so that the learner can Run it.
-
Create Coding Challenge/Exercise: If your lessons consist of long, boring text, the learner may lose interest and motivation to learn. Try to make an exercise that the learner can solve on their own. Adding hints and providing solutions is helpful for mixed-ability groups.
Widget help: For more details on Code Widget, explore Code Widget in the Author Guide.
Here’s what the Code widget looks like.
#include <iostream>using namespace std;int main() {// your can highlight lines toocout << "Hello World";return 0;}
You can use the Code tabs widget to show the same code in multiple languages.
SPA widget
The SPA (Single Page Application) widget is one of the most powerful features on the platform. It allows you to create frontend applications wherever you need them in a lesson. Moreover, if you wish to run an app with a live server connected to it, you can use the SPA widget. It gives users the ability to interact with an app/webpage and use a server terminal to see how the backend of the app works.
SPA is quite versatile. Following are some examples to give you an idea of its capabilites:
Widget help: For more details on Code Widget, explore SPA Widget in the Author Guide.
Here’s what the SPA widget looks like.
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
SPA widget has the option to import code from github as well as upload local files and folders.
Run JS widget
Do you want to incorporate client-side development in your course? You can use the Run JS widget to create web pages that support JavaScript. You can write the HTML, CSS, and JavaScript for your page.
Widget help: For more details on RunJS Widget, explore RunJS Widget in the Author Guide.
This is how the RunJS widget looks like:
To understand the full potential of Run JS, have a look at this comprehensive list of use-cases.
GUI widget
The GUI App widget allows you to create window-based GUI applications. It will come in handy when you want learners to write code for a GUI in your course.
Widget help: For more details on GUI Widget, explore GUI Widget in the Author Guide.
This is how the GUI widget looks like with the default Water Consumption Calculator App in Java Swing.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Main extends JFrame implements ActionListener {
private JLabel labelQuestion;
private JLabel labelWeight;
private JTextField fieldWeight;
private JButton buttonTellMe;
public Main() {
super("Water Calculator");
initComponents();
setSize(Toolkit.getDefaultToolkit().getScreenSize());
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
private void initComponents() {
labelQuestion = new JLabel("How much water should a person drink?");
labelWeight = new JLabel("My weight (kg):");
fieldWeight = new JTextField(5);
buttonTellMe = new JButton("Tell Me");
setLayout(new FlowLayout());
add(labelQuestion);
add(labelWeight);
add(fieldWeight);
add(buttonTellMe);
buttonTellMe.addActionListener(this);
}
public void actionPerformed(ActionEvent event) {
String message = "Buddy, you should drink %.1f L of water a day!";
float weight = Float.parseFloat(fieldWeight.getText());
float waterAmount = calculateWaterAmount(weight);
message = String.format(message, waterAmount);
JOptionPane.showMessageDialog(this, message);
}
private float calculateWaterAmount(float weight) {
return (weight / 10f) * 0.4f;
}
public static void main(String[] args) {
new Main().setVisible(true);
}
}Live terminal widget
Live Terminal is a “Ubuntu 16.04” based terminal.
Widget help: For more details on Live terminal Widget, explore Live terminal Widget in the Author Guide.
This is how the Live terminal widget looks like:
Next up, we will explore the use of Docker on the Educative platform.