Widgets

Have a look at the widgets you can use to make your Answers interactive.

Code widget

A major use of the code widget is to add executable code snippets for different languages.

The languages supported by the Educative code widget are:

  • Assembly, C, C#, C++, Clojure, CSS, D, Dart, Diff, Dockerfile, Elixir, Erlang, Go, Haskell, HTML, Java, JavaScript, Kotlin, Markdown, Node.js, Perl, PHP, PostgreSQL, Python, R, Reason, Ruby, Rust, Sass, Scala, Scheme, Shell, Solidity, Sql, Swift, TypeScript, XML, YAML.

The code widget allows you to:

  • Choose your programming language of choice
  • Execute/run the code
  • Highlight specific lines or code blocks.
  • Add input files
  • Take input from the user

These are the most relevant features related to Educative Answers.

Run JS Widget

The Run JS widget can be used to create webpages that support JavaScript. You can write HTML, CSS, and JavaScript for your page. It is the perfect tool to incorporate client-side development in your Answer.

null
null

Default Active Pane

  • The default active pane is the tab that users will initially see when they view your widget. You can choose between Output, HTML, CSS, and JavaScript. The Output tab displays your webpage, so it is recommended as the default active pane.

Line numbers

  • Checking this shows the line numbers in the code widget. Unchecking it hides the line numbers.

Show Console

  • Apart from the HTML output, you can also observe the activity on the console by enabling this feature.

AutoRun

  • Any change you make to the implementation will automatically render on your page. If this is disabled, users will have to press "Run" to view the page.
  • When this option is disabled, a user will have to run the program by clicking the “Run” button for the console output to appear otherwise the console will be empty.
  • Toggling this option will run the code automatically when the lesson is loaded so that the program’s console output is visible without having to manually run the program.

Hide Panels

  • The panel(s) which you select in this list will not be visible to the user.

No image selected
null

Single Page App

The SPA widget allows you to create simple and complex applications wherever you need them in the lesson. The SPA widget has six default loaders.

null
null

Loaders

Loaders drop-down menu has six options from which you can choose:

  • React
  • Dart
  • Typescript react
  • Elm
  • Vue.js
  • GoJS React

Add NPM Package

Here, you can define all the packages you will need for your program. Simply search it by name. If you want a specific version of the package, just write the version next to it!

Directory

This is where you create all your files and folders. You can make as many subfolders as you want, simply drag and drop files/folders to wherever they need to be.

Terminal widget

The Terminal widget is also known as a Live Terminal is a Ubuntu 20.04-based terminal. You can add it to your Answer as an integrated terminal.

Start Script

The Start Script field at the top allows you to specify the commands that should run every time the terminal configures. It isn’t visible to the reader, it is only visible to the author.

Table widget

The Table widget allows you to enter information in a tabular form. Several formatting options are available to help you create the table of your preference.

Editor View

After adding a Table widget, you’ll be presented with this table editor:

User View

Below, you can find an example of the Table widget in action.

Visuals

You can use the drawing widget to create diagrams as well as to upload and resize images.

Drawing tool

The drawing widget has functionality that allows you to create:

  • UML diagrams
  • Venn diagrams
  • Flowcharts
  • Cartoon images
  • Educative Answers images

However, its use is not restricted to just these 4 types. It gives you the freedom to draw as you please!

The widget also supports the import of images from the web.

On the left side, you have the options for adding various assets and diagrams. Educative Answers has a large repository of ready-made illustrations that can be used for various shots. For more information on the drawing widget check out our guide.

Drawing widget\text{Drawing widget}