Widgets and visuals

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.

💡 If the language you are writing on is not represented in this list, you will need to use a Docker to execute it. You can find instructions on how to use Docker here.

💡 There may be cases where the language you require is present but you would still need a docker setup. For example: you require a library or a different compiler version.

💡 You can check out the Answers docker repository to see if the required docker setup is already present.

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.

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 run the program manually.

Hide Panels

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

For more information on how to use the run JS widget check out our guide. To understand the full potential of Run JS, have a look at this comprehensive list of use-cases.

Single Page App

The SPA 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. The SPA widget has six default loaders.

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.

For more information on how to use the SPA widget check out our guide.

Terminal widget

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

There might be cases where you would want to set up a docker environment for the terminal widget. For example, you would want the MySQL server up and running in the terminal for an Answer on MySQL queries.

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.

For more information on how to use the terminal widget check out our guide.

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 Answer.

The widget natively supports two GUI-building frameworks:

• Java Swing

• Tkinter (Python)

1. Choose the default loader for a Java Swing or Python Tkinter desktop application, respectively.

2. Upload files and folders to the widget.

3. Set up a Docker environment to create GUI apps in any framework of your choice! Details on that process can be found in this lesson.

4. Import code files from Github.

5. Create files and folders.

For more information on how to use the GUI widget check out our guide.

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.