---
title: Creating a Programming Challenge
slug: lms/creating-a-programming-challenge
docTags: 
createdAt: 2024-12-02T07:26:06.499Z
---

This tutorial will explain how you can create a Coding Challenge. Let's pick a simple problem: *given a string, you want the user to write a program that return its first character*. So, for example, if **abcd** is input to the program, the program must return **a**.

The only way to automatically evaluate if a submitted piece of code is correct is to see if it works for a variety of inputs. For example, we can input **xyz**, **123** and **op**, the program must return **x**, **1** and **o** as output. These inputs that are used to check the validity of a program are called **Test Cases**. So, the main components of a Coding Challenge are:

1. A Problem Statement, preferably written in Markdown
2. A list of Test Cases
3. An editor (IDE) where the user writes the program that takes in the input and returns an output

The video below shows Socratease's interface for exactly this problem

::embed[]{url="https://youtu.be/XNbGL1nXgbw"}

# Boilerplates (Driver Code)

Reading user input (Standard Input) is notoriously hard, especially if one is reading inputs spanning multiple lines. So, most programming platforms, including ours, set up some code that does this reading of input. This lets the user focus on the core logic, and not worry about input/output. For instance, in the video above, you can see that the user doesn't have to do any input/output. They just have to fill a function. In other products, this is called Driver Code. We call it Boilerplate. There are two types of Boilerplates:

1. **User Boilerplate: **Whatever a candidate sees on the IDE. This typically has the function name and scope and the user must write the logic within it. Whatever the IDE loads with (as seen in the video above) is the User Boilerplate.
2. **Compiler Boilerplate:** Code not shown to the user, which takes user input, parses it & then calls the **User Boilerplate** function.

:::hint{type="info"}
Standard Input is always a String. The Compiler Boilerplate's role is to convert the string into a datatype that the User Boilerplate can consume. For example, if the question is to find the largest integer in a list, the input will be a string like **10 23 2 4**. The Compiler Boilerplate will convert this into a list **\[10, 23, 2, 4]** Different languages will obviously need different code to achieve this. So, User and Compiler Boilerplates are specific to the problem being solved, and the programming language.
:::

:::hint{type="info"}
JavaScript and NodeJS both use the NodeJS compiler, so use NodeJS boilerplate code for JavaScript. The examples below will show you that both JavaScript and NodeJS have identical boilerplates 
:::

# Single Line Input

Let's continue with our example of extracting the **first character of a given string**. Below, you can see the full code that is stored on Socratease. We are showing the Compiler Boilerplate as well, though the user will not see it in the IDE.



:::CodeblockTabs
```javascript
// User Boilerplate
function extractFirstChar(word){
	// Write the logic here   
}

// Compiler Boilerplate
let inputBuffer = '';
let inputLines = '';
process.stdin.setEncoding('utf-8');
process.stdin.on('data', (chunk) => {
	inputBuffer += chunk;
});
process.stdin.on('end', () => {
	inputLines = inputBuffer.split('\n');
	inputBuffer = '';

	main();
});

function readLine() {
	return inputLines.shift();
}

function main() {
	const word = readLine().trim()
	output = extractFirstChar(word);
	console.log(output)

}

```

TypeScript

```typescript
# User Boilerplate
function extractFirstChar(word: string): string {
    # Write the logic here
}

# Compiler Boilerplate
process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString: string = '';
let inputLines: string[] = [];
let currentLine: number = 0;

process.stdin.on('data', function(inputStdin: string): void {
    inputString += inputStdin;
});

process.stdin.on('end', function(): void {
    inputLines = inputString.split('\n');
    inputString = '';
    main();
});

function readLine(): string {
    return inputLines[currentLine++];
}

function main() {	
    const word = readLine();
    const output = extractFirstChar(word);
    console.log(output);
}

```

```python
# User Boilerplate
def extract_first_char(str):    
    # Write the logic here
    

# Compiler Boilerplate
inp_str = input()
print(extract_first_char(inp_str))
```

```java
//User Boilerplate
import java.util.Scanner;

class Solution {
    public Character firstChar(String input) {
        // Write the logic here
    }
}

//Compiler Boilerplate
class Driver {
    public static void main(String args[]){
        Scanner scanner = new Scanner(System.in);
        String myString = scanner.next();
        scanner.close();

        Solution sol = new Solution();
        System.out.print(Character.toString(sol.firstChar(myString)));
    }
}
```

```cpp
//User Boilerplate
#include <iostream>
#include <string.h>

using namespace std;

char first_character(string s) {
    // Write the logic here  
}

//Compiler Boilerplate

int main() {

    string s;
    cin >> s;

    char c = first_character(s);
    cout << c;

    return 0;
}
```

```nodejs
// User Boilerplate
function extractFirstChar(word){
	// Write the logic here   
}

// Compiler Boilerplate
let inputBuffer = '';
let inputLines = '';
process.stdin.setEncoding('utf-8');
process.stdin.on('data', (chunk) => {
	inputBuffer += chunk;
});
process.stdin.on('end', () => {
	inputLines = inputBuffer.split('\n');
	inputBuffer = '';

	main();
});

function readLine() {
	return inputLines.shift();
}

function main() {
	const word = readLine().trim()
	output = extractFirstChar(word);
	console.log(output)

}

```

```php
<?php
// User Boilerplate
function firstChar($word){
	
}
    

// Compiler Boilerplate
$word = fgets(STDIN);
$output = firstChar($word);
print($output);


```

C#

```csharp
// User Boilerplate

using System;

public class StringUtilities
{
    public char ExtractFirstChar(string str)
    {
        // Write your logic here
    }
}

// Compiler Boilerplate

class Program
{
    static void Main(string[] args)
    {
        string inpStr = Console.ReadLine();
        StringUtilities su = new StringUtilities();

        char firstChar = su.ExtractFirstChar(inpStr);
        Console.WriteLine(firstChar);
    }
}

```

Kotlin

```kotlin
// User Boilerplate
import java.util.*

fun getFirstChar(s: String): Char {
    // Write your logic here
}
 

// Compiler Boilerplate
fun main(args: Array<String>) {
    val sc = Scanner(System.`in`)
    val input: String = sc.next()
    val output = getFirstChar(input);
    println(output);
}
```

```dart
// User Boilerplate
import 'dart:io';
String extractFirstChar(String? s) {
  
}

// Compiler Boilerplate
void main() {
  String? inpStr = stdin.readLineSync();
  print(extractFirstChar(inpStr));
}

```

```ruby
// User Boilerplate
def solution(word)

end

// Compiler Boilerplate
word = gets.chomp
output = solution(word)
puts output

```
:::

You can clearly see that the Compiler Boilerplate is doing the input and output work. For example, in JS, the `readline()` function is reading the string as an input. It then calls the `extractFirstChar()` function and prints to standard output. The user needn't concern herself with all this. They just need to write the login within the definition of the  `extractFirstChar()` function.

The image below shows how you would enter the Compiler and User Boilerplate when you are creating a Coding Challenge. This [Github URL](https://github.com/socrateasehq/coding-challenge-boilerplate/tree/main/1_extract_1st_char/langs) has sample code for reading single lines as strings for other languages.

![](https://soc-core-testing.s3.ap-south-1.amazonaws.com/extract-char-test-case.png "JavaScript Boilerplate for Extracting First character")

:::hint{type="info"}
To execute an array function, accept a space-separated string (for example `4 5 6 7`) as input. You can then split the string and convert it into an array. What goes into Compiler Boilerplate and what goes into User Boilerplate isn't clearly defined. The more code in Compiler Boilerplate, the easier it is for the user as they can focus purely on the logic.
:::

# Test Cases

As mentioned earlier, test cases are used to verify if the submitted code is valid or not. There are two types of test cases:

1. Sample Test Case: **Shown** to the user so that they can verify if their code is working or not, before they submit. Typically, around 3 sample test cases are added to a problem.
2. Real Test Case: These test cases are **hidden** from the user (otherwise, the user can write code that returns exactly the output that is expected). There can be 5-10 real test cases and they are checked when the user finally submits the code.  The points scored by a user are pro-rated based on how many real test cases pass.

You can see real and sample test cases in the image above.

:::hint{type="info"}
The total number of test cases (including both sample and real test cases) that can be added is **16**.
:::



# Multi-line Input

More complex problems need multiple parameters. It is easiest to split the multiple parameters on different lines. For example, suppose you the problem is to **find an element in an array, given its index**. The input can then be across three lines:

`4`

`5 6 3 2`

`3`

Here, `4` in the first line refers to the number of elements in the array. `5 6 3 2` in the next line refers to the zero-indexed array **\[5, 6, 3, 2]** and `3` in the last line denotes the index of which we want the value. Obviously, the answer here is **2**. Below, you can see how the compiler boilerplate is converting the 3 lines into structured data `index` and `arr`

:::CodeblockTabs
```javascript
// User Boilerplate
function getValueAtIndex(index, arr) {
    // Write the logic here
    return;
}

// Compiler Boilerplate
let inputBuffer = '';
let inputLines = '';
process.stdin.setEncoding('utf-8');
process.stdin.on('data', (chunk) => {
	inputBuffer += chunk;
});
process.stdin.on('end', () => {
	inputLines = inputBuffer.split('\n');
	inputBuffer = '';

	main();
});

function readLine() {
	return inputLines.shift();
}

function main() {
	const numOfElements = parseInt(readLine().trim())
	const input_arr = readLine().split(' ').map((i) => parseInt(i))
	const index = parseInt(readLine().trim())
	const s = getValueAtIndex(index, arr);
	console.log(s)

}
```

Typescript

```typescript
// User Boilerplate
type Params = {
  index: number;
  arr: number[];
};

// Define a type for the return value
type Result = number | undefined;

// Define the function with type annotations
function getValueAtIndex({ index, arr }: Params): Result {
  // Write the logic here
  if (index >= 0 && index < arr.length) {
    return arr[index];
  } else {
    return undefined;
  }
}

// Compiler Boilerplate
let inputBuffer = '';
let inputLines: string[] = [];
process.stdin.setEncoding('utf-8');
process.stdin.on('data', (chunk: string) => {
  inputBuffer += chunk;
});
process.stdin.on('end', () => {
  inputLines = inputBuffer.split('\n');
  inputBuffer = '';

  main();
});

function readLine(): string {
  return inputLines.shift()!;
}

function main() {
  const input_arr = readLine().split(' ').map((i) => parseInt(i));
  const index = parseInt(readLine().trim());
  const s = getValueAtIndex({ index, arr: input_arr });
  console.log(s);
}

```

```python
# User Boilerplate
def get_value_at_index(index, arr):
    # Write the logic here
    return


# Compiler Boilerplate
num_of_elements = int(input())
arr = list(map(int, input().strip().split()))
index = int(input())

print(get_value_at_index(index, arr))
```

```java
//User Boilerplate
import java.util.Scanner;

class Solution {
    public getValueAtIndex(int index, int arr[]) {
        //write your code here
    }
}


//compiler boilderplate
class Driver {
    public static void main(String args[]){
        Scanner sc = new Scanner(System.in);
        int numOfElements = sc.nextInt();
        int arr[] = new int[numOfElements];
        for (int i = 0; i < numOfElements; i++) {
            arr[i] = sc.nextInt();
        }
        int index = sc.nextInt();

        Solution sol = new Solution();
        System.out.print(sol.getValueAtIndex(index, arr));
    }
}
```

```cpp
//User Boilerplate
#include <iostream>
#include <string.h>

using namespace std;

char get_value_at_index(int index, int arr[]) {
    //write your code here
}

//Compiler Boilerplate

int main() {

    int numOfElements;
    cin >> numOfElements;
    int arr[numOfElements];
    for (int i=0;i<numOfElements;i++)
        cin >> arr[i];
    int index;
    cin >> index;
    char c = get_value_at_index(index, arr);
    cout << c;
    return 0;
}
```

```nodejs
// User Boilerplate
function getValueAtIndex(index, arr) {
    // Write the logic here
    return;
}

// Compiler Boilerplate
let inputBuffer = '';
let inputLines = '';
process.stdin.setEncoding('utf-8');
process.stdin.on('data', (chunk) => {
	inputBuffer += chunk;
});
process.stdin.on('end', () => {
	inputLines = inputBuffer.split('\n');
	inputBuffer = '';

	main();
});

function readLine() {
	return inputLines.shift();
}

function main() {
	const numOfElements = parseInt(readLine().trim())
	const inputArr = readLine().split(' ').map((i) => parseInt(i))
	const index = parseInt(readLine().trim())
	const s = getValueAtIndex(index, inputArr);
	console.log(s)

}
```

```php
<?php
// User Boilerplate
function getValueAtIndex($index, $arr){
	
}

// Compiler Boilerplate
$numOfElements = intval(fgets(STDIN));
$arr = explode(" ", fgets(STDIN));
$index = intval(fgets(STDIN));
$output = getValueAtIndex($index, $arr);
print($output);

```
:::

This [Github URL](https://github.com/socrateasehq/coding-challenge-boilerplate/tree/main/1_extract_1st_char/langs) has sample code for reading multiple lines as strings for other languages.



![](https://soc-core-testing.s3.ap-south-1.amazonaws.com/find-index-test-case.png?v=1 "JS Boilerplate for Array Value")



# Import via Github URL

On creating a new Coding Challenge, you'll see an input field as shown below. If you have the question in a specific format on a public github repo, you can import it directly from there, instead of filling out all the fields.

::Image[]{src="https://api.archbee.com/api/optimize/sIThB0ZiqhR6tdk4fXm2D/bwH5ZzYBcWErYvq3o_eLb_image.png" size="60" width="1338" height="262" caption="Importing via Github URL" position="center" showCaption="true"}

This [Github URL](https://github.com/socrateasehq/coding-challenge-qb/tree/main/level_1/string_1_extract_1st_char) has a sample question. You can use a different Github URL, of course. Once you paste this URL into the input field and click on the Fetch button, the question-related fields get auto-populated.  You can see this in action in the gif below.

::Image[]{src="https://soc-core-testing.s3.ap-south-1.amazonaws.com/github+fetch+gif.gif" size="80" width="800" height="500" caption="Importing Question from Github repo" position="center" showCaption="true"}