How to use the live coder

This is our own nifty creation, and it works similarly to CodePen. To use: type any HTML, CSS, or JS inside their corresponding boxes, and watch the Results window below the boxes update with your changes. Once you’re happy with your code and how it renders in the Results window, move on to the next question!

Enter answer here <%= text_area_tag 'answer[answer_hash][text]', value_text, { disabled: true, data: {last: answers['text']}} %>

index.html <%= text_area_tag 'answer[answer_hash][html]', value_html, { disabled: true, data: {id: 'code-html', last: answers['html']}, class: 'code-answer code-html' } %>

styles.css <%= text_area_tag 'answer[answer_hash][css]', value_css, { disabled: true, data: {id: 'code-css', last: answers['css']}, class: 'code-answer code-css' } %>

main.js <%= text_area_tag 'answer[answer_hash][js]', value_js, { disabled: true, data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js' } %>

Results