let editor; let activeIndex = 0; const dom = {}; const HIDDEN = "- This test case is hidden"; const ARE_YOU_SURE = "Are you sure you want to switch codes?"; const MAKE_CHANGES_FIRST = "Make changes to the code and run again"; function initDom(){ dom.codeTitle = document.getElementById("code-title"); dom.codeLevel = document.getElementById("code-level"); dom.codeDescription = document.getElementById("code-description"); dom.error = document.getElementById("error"); dom.cases = document.getElementById("cases"); dom.navigator = document.getElementById("navigator"); } function init(){ initDom(); editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.session.setMode("ace/mode/javascript"); activeIndex = Math.floor(Math.random() * codes.length); loadCode(codes[activeIndex]); } function loadCode(codeSchema) { dom.codeTitle.innerHTML = `${codeSchema.title} ${codeSchema.solved ? "☑":""}`; dom.codeLevel.innerHTML = codeSchema.level; dom.codeDescription.innerHTML = codeSchema.description; dom.cases.innerHTML = ""; dom.navigator.innerHTML = `${activeIndex + 1}/${codes.length}`; editor.setValue(codeSchema.code); } const isDirty = () => editor.getValue() !== codes[activeIndex].code; function navigate(value) { const currentCode = codes[activeIndex]; if(!currentCode.solved && isDirty() && !confirm(ARE_YOU_SURE)){ return; } if(currentCode.solved){ currentCode.code = editor.getValue(); } activeIndex += value; if(activeIndex >= codes.length){ activeIndex = 0; } if(activeIndex < 0){ activeIndex = codes.length - 1; } loadCode(codes[activeIndex]); } function setError(error){ dom.error.innerHTML = error; } const pause = async (time) => new Promise(resolve => setTimeout(resolve, time)); function getEvaluatedValue(value){ try{ return eval(value) || value; } catch(e){} return value; } async function evaluateCode(){ const codeSchema = codes[activeIndex]; dom.cases.innerHTML = ""; if(!codeSchema.solved && !isDirty()){ setError(MAKE_CHANGES_FIRST); return; } editor.container.style.pointerEvents = "none"; setError(""); let solved = true; for(let testCase of codeSchema.testCases) { await pause(500); // add a call to the function with the test value to the user function const testCode = editor.getValue() + `${testCase.run}`; // evaluate the result const yourOutput = eval(testCode); const expectedOutput = getEvaluatedValue(testCase.expected); const inputText = testCase.hidden ? "" : `- Function call: ${testCase.run}
`; const yourText = `- Your Output: ${yourOutput}`; const expectedText = testCase.hidden ? HIDDEN : `- Expected Output: ${expectedOutput}`; const info = `${inputText}${yourText}
${expectedText}`; // compare the output to the expected output const result = yourOutput === expectedOutput; if(!result){ solved = false; } dom.cases.innerHTML += `

${info}

${result}

`; } editor.container.style.pointerEvents = "unset"; dom.cases.scrollIntoView({top: 0, behavior: "smooth"}); codeSchema.solved = solved; codeSchema.code = editor.getValue(); if(solved){ dom.codeTitle.innerHTML = `${codeSchema.title} ${codeSchema.solved ? "☑":""}`; } } window.onload = init; const codes = [ { title: "Multiply Number", level: "Warming Up", description: "Complete the function multi that returns a value multiplied by 2", code: `function multi(value){ // your code goes here } `, testCases: [ {run: "multi(5)", expected: 10}, {run: "multi(9)", expected: 18}, {run: "multi(6)", expected: 12, hidden: true}, {run: "multi(1)", expected: 2, hidden: true}, {run: "multi(0.5)", expected: 1, hidden: true} ] }, { title: "Palindrome", level: "Easy", description: "Complete the function isPalindrome that returns whether a string is a palidrome or not", code: `function isPalindrome(str){ // your code goes here } `, testCases: [ {run: "isPalindrome('racecar')", expected: true}, {run: "isPalindrome('codecoach')", expected: false}, {run: "isPalindrome('banana')", expected: false, hidden: true}, {run: "isPalindrome('sololearnraelolos')", expected: true, hidden: true}, {run: "isPalindrome('level')", expected: true, hidden: true} ] }, { title: "Count Upper Case Letters", level: "Easy", description: "Complete the function countUpperCase that returns the amount of upper case letters in a string", code: `function countUpperCase(str){ // your code goes here } `, testCases: [ {run: "countUpperCase('a random string fully lower cased')", expected: 0}, {run: "countUpperCase('SoloLearn')", expected: 2}, {run: "countUpperCase('I Have So Many UpperCase Letters In Me!!!')", expected: 9, hidden: true}, {run: "countUpperCase('IAMALLUPPERCASE')", expected: 15, hidden: true}, {run: "countUpperCase('just One this time')", expected: 1, hidden: true} ] }, { title: "Filter by keyword", level: "Medium", description: "Complete the function filterByKeyword that returns a string of the words that contain the given keyword", code: `function filterByKeyword(str, keyword){ // your code goes here } `, testCases: [ {run: "filterByKeyword('a random string fully lower cased', 'random')", expected: "random"}, {run: "filterByKeyword('SoloLearn is a platform for learning while playing', 'learn')", expected: "SoloLearn learning"}, {run: "filterByKeyword('This is quite easy actually', 'is')", expected: "This is", hidden: true}, {run: "filterByKeyword('I am running out of test cases to do', 't')", expected: "out test to", hidden: true}, {run: "filterByKeyword('It is very hard thinking of these test cases, i am all out of ideas', 'Burey')", expected: "", hidden: true} ] }, { title: "Remove extra spaces", level: "Medium", description: "Complete the function removeExtraSpaces that returns a string without the extra spaces", code: `function removeExtraSpaces(str){ // your code goes here } `, testCases: [ {run: "removeExtraSpaces('just a sentence, nothing to see here')", expected: "just a sentence, nothing to see here"}, {run: "removeExtraSpaces(' SoloLearn is a platform for learning while playing ')", expected: "SoloLearn is a platform for learning while playing"}, {run: "removeExtraSpaces(' This is quite easy actually ')", expected: "This is quite easy actually", hidden: true}, {run: "removeExtraSpaces(' stringy string ')", expected: "stringy string", hidden: true} ] }, { title: "Add punctuation marks", level: "Medium", description: "Complete the function addPunctuationMarks that returns a string with punctuation mark between words.

Spam Eggs Ham => Spam, Eggs and Ham

The function also sort the elements alphabetically if the withSort argument is true", code: `function addPunctuationMarks(str, withSort){ // your code goes here } `, testCases: [ {run: "addPunctuationMarks('Spam Eggs Ham', false)", expected: "Spam, Eggs and Ham"}, {run: "addPunctuationMarks('Foo Bar', true)", expected: "Bar and Foo"}, {run: "addPunctuationMarks('Oranges apples Strawberry lemons', true)", expected: "apples, lemons, Oranges and Strawberry", hidden: true}, {run: "addPunctuationMarks('Strings Variables Constants Functions', false)", expected: "Strings, Variables, Constants and Functions", hidden: true} ] } ];

JS Code Coach demo