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.
For more information on how to use the code widget check out our guide.
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.
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.
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)
Choose the default loader for a Java Swing or Python Tkinter desktop application, respectively.
Upload files and folders to the widget.
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.
Import code files from Github.
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.
