Unable to test in codepen

Hi, I am currently working on the survey form, passing 15/17 tests.
However when I attempt to enter a the text box appears in the preview but has some script inside it and the Hamburger icon (for running the tests disappears)

Your code so far

<h1 id="title">Training Survey Form</h1>
<p id="description"> Please help us by taking a few moments to fill out this short survey</p>
<form id="survey-form">
  <label for"name" id="name-label">Name</label>
  <input id="name"type="text" name="name" placeholder="Name" required </input>
  <br><br>
  <label for"email" id="email-label">Email</label>
  <input id="email" type="email" name="email" placeholder="example@world.com" required </input>
  <br><br>
  <label for="number" id="number-label">Age</label>
  <input id="number" type="number" name="number" placeholder="99" max="120" min="16" required</input>
  <br><br>
  
  <label for="gender" id="gender">Gender</label>
  <br>
  <label for="gender">Male</label>
  <input id="gender" type="radio" id="male" name="gender" value="male">
  
  <label for="gender">Female</label>
  <input id="gender" type="radio" id="female" name="gender" value="female">
 
  <br><br>
  
  <label for="dropdown" id="favorite"> Select your strongest discipline</label>
  <select id="dropdown">
    <option value="swimming">Swimming</option>
     <option value="cycling">Cycling</option>
     <option value="running">Running</option>
  </select>
  <br><br>
<label for="otherTraining">Other training you enjoy</label>
<br>
<input id="checkbox" type="checkbox" value="gym">
<label for="checkbox">Gym</label>
<br>
<input id="checkbox" type="checkbox" value="crossfit">
<label for="checkbox">Crossfit</label>
<br>
<input id="checkbox" type="checkbox" value="Spinning">
<label for="checkbox">Spinning</label>
<br>
  <br>
  attempting to place a 
<textarea> here

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

@mattyfg, it’s best to include a link to your pen rather than your code. It makes it easier to see what’s happening.

  1. Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). The test script, with all tests passing, should be included when you submit your projects. When a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.
    Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
  2. Mentioning the above because we do not see where the test script is that you say is disappearing. It could be in the JS editor where it would be if you forked the pen but we cannot tell that.
  3. There’s a syntax error with your textarea element. It’s not closed. You can run your HTML code through the W3C validator to check for syntax / coding errors.

On a side note, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

thanks for the reply

The text area element was added as an example, when closed it still shows the script in the text box, and the Hamburger icon disappears.

Thanks for the tip re:
, it is appreciated, only just started learning!

It looks as though the FCC’s test script has been deleted. You can get it from my previous post (copy everything between the parens) and place it at the bottom of codepen’s HTML editor. You’ll see it then.

You have a few typo’s. As a suggestion, switch the Syntax Highlighting in Codepen to help catch errors.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.

Roma, thank you,

Pasted in the HTML editor and when I open the it shows the script, and the icon disappears, as soon as I close the tag the icon reappears.

I have adjusted my settings as suggested and many typos appear, I have missed many ='s and closed input tags incorrectly.

Thank you very much for your help, problem solved.

1 Like