This should work on tablets/mobile devices as well

Dependent on #7

• Once we have rules for grading, this issue is to track work on doing said grading.

related to #5 - this is the check to see if rendered code is similar/same/different/wrong.

1. Compare the output of inputCode to goalCode to see if they are identical
   • add selenium or similar
   • compare output graphically
   • compare output analytically

The Readme file should really explain how this all works.

Description

On some level, we need to check to see if the code that the student inputs is correct or not

• don't forget to trim whitespace
• minify code? moved to #23

Using the minify package seems to be challenging. When we added it to any of our react code as a dependency, it seemed to break runtime.

I think we may need to run minify as a background task from a separate API process that runs alongside the CRA project. Then we could call the minify process by way of fetch() and a redux-thunk action asynchronously.

The code within <CodeChallenge /> is getting long - I'd like to extract the logic that displays the status of the code challenge into its own component. That should show:

• is this component loading?
• has it been graded?
• what was the grade?
• how many attempts left?

Once the grade is complete, we need to give the student feedback:

• what was their grade?
• how many attempts did they use?
• how many attempts remaining?
• where did they lose credit?

Maybe using grid/flexbox, allow users to interact with their working environment, like codepen or jsbin.

This is to create a plan for grading code challenges:

• what weight does code have vs rendered and functional output?
• how to determine whether code is good or not?

This will be a place for all of the instructions needed to complete the challenge. I anticipate that it will fall in line below the title of the problem

Come up with a way to obscure / hide / change the "goal code" markup that renders in an iframe on the page so that a savvy test taker can't just steal it.

Related to #5 - This is to track work specifically related to minifying code.

Things we know:

• Minifying may need to be done via server side node, rather than client side. To do this, we may need to set up proxy for local dev environment to send serverside node back and forth via API call.

We should have CI run before code gets to heroku 👍

• package as a standalone react component
  • remove dependency on create-react-app
  • add to npm?
  • document use and configuration

Description

When the <CodeChallenge /> component is provided a goalCode prop, we can expect that that is a desired end result of the work for this problem.

If goalCode is provided, we should render it in an iframe on the page, as an example of what to do.