changes in editor do not change real-time - must click run tests

Challenge use-html5-to-require-a-field has an issue. User Agent is: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

The issue I am reporting is not unique to this problem, but is definitely more evident in this problem. The original FCC allowed you “see” the changes browser screen (fake phone on the right) as you edited them. Now you have to click “Run tests” to see any change.

The problem with this in this particular exercise is that once you type the “required” statement into the text box and click “Run tests”, you automatically pass the challenge without being able do as it says in the instructions (see below).

Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?

If you come into the challenge and type “required” correctly and click the submit button shown in the fake phone, does not prompt you with “Please fill out this field”, because you must first run the tests for the fake phone to get the new code.

Why did they make such a change? The original FCC allowed you to “play” with the code before running tests. All good editors (not notepad) give you a real-time view of changes you make in the editor.

Just curious why the change?

Randell

    
    
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
}

h2 {
  font-family: Lobster, Monospace;
}

p {
  font-size: 16px;
  font-family: Monospace;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

.smaller-image {
  width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back." src="https://bit.ly/fcc-relaxing-cat"></a>

<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

    ```
    

[RandellDawson]

I suppose that would work. Is there a way to load the page the first time where it updates the preview but does not run the tests? That would be the best solution, then you would not have to change the button text and people could see the challenge “as-is” before making modifications to the code.

I know it was stated there are some JQuery issues when auto-running , but I have to be honest and say the beauty of the real-time preview updates were a big selling point in learning new challenges.

Maybe there can be some verbiage add to the first 1-10 challenges with text at the top stating something like “Please run your tests first to see what the current code produces before changing any code.” And then, on challenges that did not build on the previous challenges content, put the same text at the top of the challenge again. I find it quite startling when I first hit the Run Tests button and see that the content is completely different than the last challenge. I always do a double-take and it makes me think there is a bug, because I was expecting the preview to look different. For a beginner, they would not know if they messed up their code or they really should be seeing content that is completely different from the last challenge.

If there are only a handful of JQuery challenges where “run on the fly” is a problem, why not disable “run on the fly” just for those particular problems and then add in the text I mentioned above for those. That way, the majority of the challenges work as was originally intended with no surprises to the camper.

These are just my opinions having worked in both versions. I really do like the new content and challenges of the Beta and continue to work through them all to fill content not covered in the original FCC.

Randell

[raisedadead]

@QuincyLarson well in a perfect world, we should be able to execute the code only on the jQuery challenges.

I am not 100% percent sure, but yup I’ll give it a try and update.