Code Widget

Developers use IDEs to code full-fledged programs. Educative provides hands-on learning environment to allow learners to code in any programming language without setting any local setup. You can use the 'Code widget' to add code in the provided window.

We'll cover the following

This is what it looks like:

Press + to interact
Edit mode
Edit mode

What do I need to know?

  • Language: You can choose the programming language of your choice from the drop-down menu. 30+ languages are available by default.

  • Add Hello World for <lang>: You can generate a simple “Hello World” code for the selected language.

  • Add File: You can add new files to your program. This button creates a file in the same directory as your main file, i.e., usercode folder at the backend.

  • Mark as Primary File: You may want learners to view a particular file at first glance. Open the file from the side panel and select the "Mark as Primary File" checkbox.

  • Highlight lines: You can highlight important lines of code in any file. Open the file from the side panel and enter the line ranges. For example:
    1-3
5
    This will highlight lines 1-3 and line 5 of the selected file.

  • Mark current file as read-only: You may want learners not to alter a particular file. Open the file from the side panel and select the "Mark current file as read-only" checkbox.

  • Downloadable: Select the "Downloadable" checkbox so learners can download the code.

  • Execute: Select the "Execute" checkbox to make the program executable. By default, learners can not run the code. Once you mark it, more functionalities appear.

Press + to interact
Executable coding window
Executable coding window

Can I hide some part of my code?

You can hide part of your code. If your main program file includes code at the beginning or end that is irrelevant to learners, you can mark the "Hidden Code" checkbox. It will open a coding panel where you can append or prepend your code.

Press + to interact
Choose the option from the drop-down menu
Choose the option from the drop-down menu

Can learners enter input at runtime?

The code widget provides console-based interaction to take input from learners at runtime. Mark the "Stdin" checkbox. See the program below.

Press + to interact
#include <iostream>
using namespace std;
int main() {
  // your code goes here
  int x;
  cin >> x;
  cout << "The entered number is: " << x;
  return 0;
}

Enter the input below

Note that the learners can not execute the program unless they enter the value in the input field.

Is HTML output supported?

Yes, the HTML syntax is supported. If the output contains HTML tags, you can mark the "Treat Output as HTML" checkbox. See the C++ program below.

Press + to interact
#include <iostream>
using namespace std;
int main() {
  cout << "<h1> Heading 1 </h1>";
  cout << "<h1> Heading 1 </h1>";
}

Can I save a file as an output?

Output in file format is also supported.

Reminder: All the files added in the code widget (or any coding widgets) will be placed in the usercode directory.

See the example code given below.

Press + to interact
#include <iostream>
#include <fstream>
 
using namespace std;
 
int main()
{
   fstream file;                            //object of fstream class
   file.open("output/sample.txt",ios::out); //opening file "sample.txt" in out(write) mode
   cout<<"File created successfully."<<endl;
  
   file<<"Welcome to Educative!:)";  //write text into file
   file.close();                     //closing the file
    
   //again open file in read mode
   file.open("output/sample.txt",ios::in);
   if(!file)
   {
       cout<<"Error in opening file!!!"<<endl;
       return 0;
   }   
    
   //read untill end of file is not found.
   char ch; 
   cout<<"File content: ";
   while(!file.eof())
   {
       file>>ch; //read single character from file
       cout<<ch;
   }
   
   file.close(); //close file
   return 0;
}

The line 17 does the trick. It's necessary to save the output file in the usercode/output directory. If the output is an image, it will be displayed in the output window; otherwise, it will be available for download.

Is there any size limit?

There is no limit for the code size on the front-end side of the code widget. So learners can write a very long code without running into errors. However, the backend has a character limit of 716800716800716800 characters for the coding widget. In case, this limit is crossed, it will throw up an error. In order, to support a code of greater size in the widget, follow the steps given below:

  • Step I: Copy your code to a file.
  • Step II: Convert your file to the tar.gz form. You can go over the following steps to do that:
    • Navigate to the folder containing the file you want to convert and open the terminal.
    • In the terminal, type the command:
      tar -czvf NameofTarfile.tar.gz NameofActualFile.ExtensionName.
      For example, the tar -czvf MyFile.tar.gz test.cpp command will create the MyFile.tar.gz collection with test.cpp in it.
  • Step III: Next, go to the collection editor of your course. Scroll down and go to the “CODE EXECUTION RESOURCE FILE” option. Click the “Change File” option to upload the tar.gz file.
  • Step IV: Lastly, save the course.

Now when you go to the Code widget (or any coding widget), the file will automatically be fetched in the usercode directory and executed without the limit exceeded error showing up.

Can I hide files completely?

As discussed above, you can use the "CODE EXECUTION RESOURCE FILE" option for this purpose as well. As an example, we've already uploaded a tarball with 2 files: names.txt and student.py. Run the code below to verify.

Press + to interact
ls

As you can see that names.txt and student.py files are already extracted to the usercode directory.

It is always a good practice to follow the conventions of the programming language you’re writing in. Your content will become more credible if the code quality is up to universal standards. Educative has a style guide to help you understand the conventions of several popular languages!

The Code widget supports another feature: Key-sharing and key replacement. You can learn more about this here.