Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>
<body>
    <head>
       
    </head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<h1 id="title">Management performance survey</h1>
<p id="description" class="">This survey aims to help understand your relationship with your superiors. It consists of a short section with questions regarding yourself and your role followed by 15 questions concernig your supervisor.</p>
<form id="survey-form" autocomplete="off" name="survey" action="">
  <div id="misc-data" class="sub-container">
    <b>Your data</b>
    <p>
      <label id="name-label" for="name">Full name
			<!--quasi bypassed html 5 form validation here and implemented my own because of the way one field filled leads to the next becoming enabled/visible. rethink this maybe-->
      <input id="name" type="text" placeholder="Name" required onkeyup="checkValid('name', 'email')">
		</label>
      <p>
        <label id="email-label" for="email">Email address
        <!--investigate addEventListener() VS onclick-->
			<input id="email" type="email" placeholder="Email address" required disabled onkeyup="checkValid('email', 'dropdown')">
		</label>
      </p>
  </div>

  <div id="extended-data" class="sub-container">
    <b>Your role</b>
    <p>
      <label id="role_label" for="dropdown">Which best describes your current role?
			<select id="dropdown" required disabled onchange="checkSelectValid()">
				<option value="" disabled selected>Please select an option</option>
				<option value="Software Developer">Software Developer</option>
				<option value="Software Tester">Software Tester</option>
				<option value="Test Manager">Test Manager</option>
				<option value="Business Analyst">Business Analyst</option>
				<option value="Project Manager">Project Manager</option>
				<option value="Project Office Employee">Project Office Employee</option>
				<option value="Support Desk Employee">Support Desk Employee</option>
				<option value="Software Architect">Software Architect</option>
			</select>
		</label>
      <p>
        <label id="number-label" for="number">How long do you hold your current position?
			<input id="number" type="number" placeholder="Years" min="1" max="60" required disabled onkeyup="checkValid('number', 'gobtn')">
		</label>
      </p>
  </div>
  <div>
    <input type="button" onclick="hideGoAndGo()" value="Take the survey" class="btn" id="gobtn" disabled>
  </div>
  <div id="questions" class="sub-container hidden">
    <progress id="prgrs" value="6.7" max="100"></progress>
    <div id="question1" class="qcontainer hidden">

      <div id="question-one" class="question">Question 1: How comfortable do you feel voicing your concerns to your supervisor?</div>
      <div class="answer">
        <label id="q1a1-label">
					<input id ="q1a1" type="radio" name="group1" value="1" onclick="hideAndNext('question1', 'question2')">Extremely comfortable
				</label>
        <label id="q1a2-label">
					<input id ="q1a2" type="radio" name="group1" value="2" onclick="hideAndNext('question1', 'question2')">Very comfortable
				</label>
        <label id="q1a3-label">
					<input id ="q1a3" type="radio" name="group1" value="3" onclick="hideAndNext('question1', 'question2')">Somewhat comfortable
				</label>
        <label id="q1a4-label">
					<input id ="q1a4" type="radio" name="group1" value="4" onclick="hideAndNext('question1', 'question2')">Not so comfortable
				</label>
        <label id="q1a5-label">
					<input id ="q1a5" type="radio" name="group1" value="5" onclick="hideAndNext('question1', 'question2')">Not at all comfortable
				</label>
      </div>
    </div>

    <div id="question2" class="qcontainer hidden">
      <input type="button" onclick="goBack('question2', 'question1')" value="Previous question" class="backbtn">

      <div id="question-two" class="question">Question 2: Would you like to interact with your supervisor more, less, or about the same amount as you currently interact with him/her?</div>
      <div class="answer">
        <label id="q2a1-label">
					<input id ="q2a1" type="radio" name="group2" value="1" onclick="hideAndNext('question2', 'question3')">Much more
				</label>
        <label id="q2a2-label">
					<input id ="q2a2" type="radio" name="group2" value="2" onclick="hideAndNext('question2', 'question3')">More
				</label>
        <label id="q2a3-label">
					<input id ="q2a3" type="radio" name="group2" value="3" onclick="hideAndNext('question2', 'question3')">The same amount
				</label>
        <label id="q2a4-label">
					<input id ="q2a4" type="radio" name="group2" value="4" onclick="hideAndNext('question2', 'question3')">Less
				</label>
        <label id="q2a5-label">
					<input id ="q2a5" type="radio" name="group2" value="5" onclick="hideAndNext('question2', 'question3')">Much less
				</label>
      </div>
    </div>

    <div id="question3" class="qcontainer hidden">
      <input type="button" onclick="goBack('question3', 'question2')" value="Previous question" class="backbtn">

      <div id="question-three" class="question">Question 3: How clearly does your supervisor explain the company's business plans?</div>
      <div class="answer">
        <label id="q3a1-label">
					<input id="q3a1" type="radio" name="group3" value="1" onclick="hideAndNext('question3', 'question4')">Extremely clearly
				</label>
        <label id="q3a2-label">
					<input id="q3a2" type="radio" name="group3" value="2" onclick="hideAndNext('question3', 'question4')">Very clearly
				</label>
        <label id="q3a3-label">
					<input id="q3a3" type="radio" name="group3" value="3" onclick="hideAndNext('question3', 'question4')">Somewhat clearly
				</label>
        <label id="q3a4-label">
					<input id="q3a4" type="radio" name="group3" value="4" onclick="hideAndNext('question3', 'question4')">Not so clearly
				</label>
        <label id="q3a5-label">
					<input id="q3a5" type="radio" name="group3" value="5" onclick="hideAndNext('question3', 'question4')">Not at all clearly
				</label>
      </div>
    </div>

    <div id="question4" class="qcontainer hidden">
      <input type="button" onclick="goBack('question4', 'question3')" value="Previous question" class="backbtn">

      <div id="question-four" class="question">Question 4: When decisions or goals change, how often does your supervisor explan to you why this has happened?</div>
      <div class="answer">
        <label id="q4a1-label">
					<input id="q4a1" type="radio" name="group4" value="1" onclick="hideAndNext('question4', 'question5')">Always
				</label>
        <label id="q4a2-label">
					<input id="q4a2" type="radio" name="group4" value="2" onclick="hideAndNext('question4', 'question5')">Most of the time
				</label>
        <label id="q4a3-label">
					<input id="q4a3" type="radio" name="group4" value="3" onclick="hideAndNext('question4', 'question5')">About half the time
				</label>
        <label id="q4a4-label">
					<input id="q4a4" type="radio" name="group4" value="4" onclick="hideAndNext('question4', 'question5')">Once in a while
				</label>
        <label id="q4a5-label">
					<input id="q4a5" type="radio" name="group4" value="5" onclick="hideAndNext('question4', 'question5')">Never
				</label>
      </div>
    </div>

    <div id="question5" class="qcontainer hidden">
      <input type="button" onclick="goBack('question5', 'question4')" value="Previous question" class="backbtn">

      <div id="question-five" class="question">Question 5: How realistic are the expectations of your supervisor?</div>
      <div class="answer">
        <label id="q5a1-label">
					<input id="q5a1" type="radio" name="group5" value="1" onclick="hideAndNext('question5', 'question6')">Extremely realistic
				</label>
        <label id="q5a2-label">
					<input id="q5a2" type="radio" name="group5" value="2" onclick="hideAndNext('question5', 'question6')">Very realistic
				</label>
        <label id="q5a3-label">
					<input id="q5a3" type="radio" name="group5" value="3" onclick="hideAndNext('question5', 'question6')">Somewhat realistic
				</label>
        <label id="q5a4-label">
					<input id="q5a4" type="radio" name="group5" value="4" onclick="hideAndNext('question5', 'question6')">Not so realistic
				</label>
        <label id="q5a5-label">
					<input id="q5a5" type="radio" name="group5" value="5" onclick="hideAndNext('question5', 'question6')">Not at all realistic
				</label>
      </div>
    </div>

    <div id="question6" class="qcontainer hidden">
      <input type="button" onclick="goBack('question6', 'question5')" value="Previous question" class="backbtn">

      <div id="question-six" class="question">Question 6: How well does management handle political issues that affect the company?</div>
      <div class="answer">
        <label id="q6a1-label">
					<input id="q6a1" type="radio" name="group6" value="1" onclick="hideAndNext('question6', 'question7')">Extremely well
				</label>
        <label id="q6a2-label">
					<input id="q6a2" type="radio" name="group6" value="2" onclick="hideAndNext('question6', 'question7')">Very well
				</label>
        <label id="q6a3-label">
					<input id="q6a3" type="radio" name="group6" value="3" onclick="hideAndNext('question6', 'question7')">Somewhat well
				</label>
        <label id="q6a4-label">
					<input id="q6a4" type="radio" name="group6" value="4" onclick="hideAndNext('question6', 'question7')">Not so well
				</label>
        <label id="q6a5-label">
					<input id="q6a5" type="radio" name="group6" value="5" onclick="hideAndNext('question6', 'question7')">Not at all well
				</label>
      </div>
    </div>

    <div id="question7" class="qcontainer hidden">
      <input type="button" onclick="goBack('question7', 'question6')" value="Previous question" class="backbtn">

      <div id="question-seven" class="question">Question 7: How much support for the company is management able to get from the community?</div>
      <div class="answer">
        <label id="q7a1-label">
					<input id="q7a1" type="radio" name="group7" value="1" onclick="hideAndNext('question7', 'question8')">A great deal of support
				</label>
        <label id="q7a2-label">
					<input id="q7a2" type="radio" name="group7" value="2" onclick="hideAndNext('question7', 'question8')">A lot of support
				</label>
        <label id="q7a3-label">
					<input id="q7a3" type="radio" name="group7" value="3" onclick="hideAndNext('question7', 'question8')">A moderate amount of support
				</label>
        <label id="q7a4-label">
					<input id="q7a4" type="radio" name="group7" value="4" onclick="hideAndNext('question7', 'question8')">A little support
				</label>
        <label id="q7a5-label">
					<input id="q7a5" type="radio" name="group7" value="5" onclick="hideAndNext('question7', 'question8')">No support at all
				</label>
      </div>
    </div>

    <div id="question8" class="qcontainer hidden">
      <input type="button" onclick="goBack('question8', 'question7')" value="Previous question" class="backbtn">

      <div id="question-eight" class="question">Question 8: How effective is management at public relations</div>
      <div class="answer">
        <label id="q8a1-label">
					<input id="q8a1" type="radio" name="group8" value="1" onclick="hideAndNext('question8', 'question9')">Extremely effective
				</label>
        <label id="q8a2-label">
					<input id="q8a2" type="radio" name="group8" value="2" onclick="hideAndNext('question8', 'question9')">Very effective
				</label>
        <label id="q8a3-label">
					<input id="q8a3" type="radio" name="group8" value="3" onclick="hideAndNext('question8', 'question9')">Somewhat effective
				</label>
        <label id="q8a4-label">
					<input id="q8a4" type="radio" name="group8" value="4" onclick="hideAndNext('question8', 'question9')">Not so effective
				</label>
        <label id="q8a5-label">
					<input id="q8a5" type="radio" name="group8" value="5" onclick="hideAndNext('question8', 'question9')">Not at all effective
				</label>
      </div>
    </div>

    <div id="question9" class="qcontainer hidden">
      <input type="button" onclick="goBack('question9', 'question8')" value="Previous question" class="backbtn">

      <div id="question-nine" class="question">Question 9: Does your supervisor spend too much, too little, or the right amount of money to meet goals?</div>
      <div class="answer">
        <label id="q9a1-label">
					<input id="q9a1" type="radio" name="group9" value="1" onclick="hideAndNext('question9', 'question10')">Much too much
				</label>
        <label id="q9a2-label">
					<input id="q9a2" type="radio" name="group9" value="2" onclick="hideAndNext('question9', 'question10')">Too much
				</label>
        <label id="q9a3-label">
					<input id="q9a3" type="radio" name="group9" value="3" onclick="hideAndNext('question9', 'question10')">The right amount
				</label>
        <label id="q9a4-label">
					<input id="q9a4" type="radio" name="group9" value="4" onclick="hideAndNext('question9', 'question10')">To little
				</label>
        <label id="q9a5-label">
					<input id="q9a5" type="radio" name="group9" value="5" onclick="hideAndNext('question9', 'question10')">Much too little
				</label>
      </div>
    </div>

    <div id="question10" class="qcontainer hidden">
      <input type="button" onclick="goBack('question10', 'question9')" value="Previous question" class="backbtn">

      <div id="question-ten" class="question">Question 10: How effectively does your supervisor use company resources?</div>
      <div class="answer">
        <label id="q10a1-label">
					<input id="q10a1" type="radio" name="group10" value="1" onclick="hideAndNext('question10', 'question11')">Extremely effectively
				</label>
        <label id="q10a2-label">
					<input id="q10a2" type="radio" name="group10" value="2" onclick="hideAndNext('question10', 'question11')">Very effectively
				</label>
        <label id="q10a3-label">
					<input id="q10a3" type="radio" name="group10" value="3" onclick="hideAndNext('question10', 'question11')">Somewhat effectively
				</label>
        <label id="q10a4-label">
					<input id="q10a4" type="radio" name="group10" value="4" onclick="hideAndNext('question10', 'question11')">Not so effectively
				</label>
        <label id="q10a5-label">
					<input id="q10a5" type="radio" name="group10" value="5" onclick="hideAndNext('question10', 'question11')">Not at all effectively
				</label>
      </div>
    </div>

    <div id="question11" class="qcontainer hidden">
      <input type="button" onclick="goBack('question11', 'question10')" value="Previous question" class="backbtn">

      <div id="question-eleven" class="question">Question 11: How well does your supervisor handle employee problems?</div>
      <div class="answer">
        <label id="q11a1-label">
					<input id="q11a1" type="radio" name="group11" value="1" onclick="hideAndNext('question11', 'question12')">Extremely well
				</label>
        <label id="q11a2-label">
					<input id="q11a2" type="radio" name="group11" value="2" onclick="hideAndNext('question11', 'question12')">Very well
				</label>
        <label id="q11a3-label">
					<input id="q11a3" type="radio" name="group11" value="3" onclick="hideAndNext('question11', 'question12')">Somewhat well
				</label>
        <label id="q11a4-label">
					<input id="q11a4" type="radio" name="group11" value="4" onclick="hideAndNext('question11', 'question12')">Not so well
				</label>
        <label id="q11a5-label">
					<input id="q11a5" type="radio" name="group11" value="5" onclick="hideAndNext('question11', 'question12')">Not at all well
				</label>
      </div>
    </div>

    <div id="question12" class="qcontainer hidden">
      <input type="button" onclick="goBack('question12', 'question11')" value="Previous question" class="backbtn">

      <div id="question-twelve" class="question">Question 12: How committed is your supervisor to making the company a more comfortable place to work?</div>
      <div class="answer">
        <label id="q12a1-label">
					<input id="q12a1" type="radio" name="group12" value="1" onclick="hideAndNext('question12', 'question13')">Extremely commited
				</label>
        <label id="q12a2-label">
					<input id="q12a2" type="radio" name="group12" value="2" onclick="hideAndNext('question12', 'question13')">Very commited
				</label>
        <label id="q12a3-label">
					<input id="q12a3" type="radio" name="group12" value="3" onclick="hideAndNext('question12', 'question13')">Somewhat commited
				</label>
        <label id="q12a4-label">
					<input id="q12a4" type="radio" name="group12" value="4" onclick="hideAndNext('question12', 'question13')">Not so commited
				</label>
        <label id="q12a5-label">
					<input id="q12a5" type="radio" name="group12" value="5" onclick="hideAndNext('question12', 'question13')">Not at all commited
				</label>
      </div>
    </div>

    <div id="question13" class="qcontainer hidden">
      <input type="button" onclick="goBack('question13', 'question12')" value="Previous question" class="backbtn">

      <div id="question-thirteen" class="question">Question 13: How well do your supervisor's priorities match up with the goals of your company?</div>
      <div class="answer">
        <label id="q13a1-label">
					<input id="q13a1" type="radio" name="group13" value="1" onclick="hideAndNext('question13', 'question14')">Extremely well
				</label>
        <label id="q13a2-label">
					<input id="q13a2" type="radio" name="group13" value="2" onclick="hideAndNext('question13', 'question14')">Very well
				</label>
        <label id="q13a3-label">
					<input id="q13a3" type="radio" name="group13" value="3" onclick="hideAndNext('question13', 'question14')">Somewhat well
				</label>
        <label id="q13a4-label">
					<input id="q13a4" type="radio" name="group13" value="4" onclick="hideAndNext('question13', 'question14')">Not so well
				</label>
        <label id="q13a5-label">
					<input id="q13a5" type="radio" name="group13" value="5" onclick="hideAndNext('question13', 'question14')">Not at all well
				</label>
      </div>
    </div>

    <div id="question14" class="qcontainer hidden">
      <input type="button" onclick="goBack('question14', 'question13')" value="Previous question" class="backbtn">

      <div id="question-fourteen" class="question">Question 14 (optional): What does management need to do to improve its performance?</div>
      <div class="answer">
        <label id="q14-label">
					<textarea id="q14a" rows="5" cols="50"></textarea>
				</label>
      </div>
      <input class="btn" type="button" onclick="toggle15()" value="Save">
    </div>

    <div id="question15" class="qcontainer hidden">
      <input type="button" onclick="goBackFromLast('question15', 'question14')" value="Previous question" class="backbtn">

      <div id="question-fifteen" class="question">Question 15 (optional): Your supervisor is... (choose any that apply)</div>
      <div class="answer">
        <ul style="list-style-type:none">
          <li>
            <label>
							<input id="q15a1" type="checkbox" name="one" value="1" onclick="toggleSubmit()">forthcoming</label>
          </li>
          <li>
            <label>
							<input id="q15a2" type="checkbox" name="two" value="2" onclick="toggleSubmit()">diplomatic</label>
          </li>
          <li>
            <label>
							<input id="q15a3" type="checkbox" name="three" value="3" onclick="toggleSubmit()">rooted</label>
          </li>
          <li>
            <label>
							<input id="q15a4" type="checkbox" name="four" value="4" onclick="toggleSubmit()">humorous</label>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <input id="submit" type="submit" class="hidden btn" onclick="thankYou()" value="Submit answers">
</form>
<div id="thanks" class="hidden">Thank you!
  <p>
    <!--this start over refresh idea does not work when page is loaded in codepen, investigate-->
    <a onClick="location.href=location.href"><u>Start over</u></a>
  </p>
  <p>
    or
  </p>
  <p>
    <a href="https://en.wikipedia.org/wiki/Special:Random">Go somewhere else and learn something</a>
  </p>
</div>
</div>
</body>
</html>
              
            
!

CSS

              
                #description {
  margin-left: 27%;
  margin-right: 27%;
  text-align: block;
}

#title {
  text-align: center;
  font-size: 3em
}

#survey-form {
  border-color: black;
  border-width: 5px;
  border-style: solid;
  border-radius: 7px;
  width: 50%;
  margin-left: 25%;
}

#misc-data,
#extended-data,
#questions {
  border-color: black;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
}

.sub-container {
  margin: 5px;
  padding: 15px;
}

.qcontainer {
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

.question {
  position: relative;
  margin: auto;
  width: 90%;
}

.answer {
  position: relative;
  margin: auto;
  width: 90%;
}

.btn {
  width: auto;
  background: #2ba6cb;
  border: 1px solid #1e728c;
  border-radius: 7px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin-top: 10px;
  margin-left: 40%;
  margin-bottom: 10px;
  padding: 10px 20px 11px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out;
}

.btn:hover {
  background: #006582;
}

.backbtn {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#reveal-survey {
  display: none;
}

#thanks {
  text-align: center;
}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.hidden {
  display: none;
}
              
            
!

JS

              
                var progress = 6.7;

function hideGoAndGo () {
	document.getElementById('questions').classList.remove("hidden");
	document.getElementById('question1').classList.remove("hidden");
	document.getElementById('gobtn').classList.add("hidden");
}

function hideAndNext (now, next) {
	document.getElementById(now).classList.add("hidden");
	document.getElementById(next).classList.remove("hidden");
  progress = progress + 6.7;
  document.getElementById('prgrs').value= progress;
}

function goBack (now, previous) {
	document.getElementById(now).classList.add("hidden");
	document.getElementById(previous).classList.remove("hidden");
  progress = progress - 6.7;
  document.getElementById('prgrs').value= progress;
}

function goBackFromLast (now, previous) {
	document.getElementById('submit').classList.add("hidden");
	document.getElementById(now).classList.add("hidden");
	document.getElementById(previous).classList.remove("hidden");
}

function toggle15 () {
	document.getElementById('question15').classList.remove("hidden");
	document.getElementById('question14').classList.add("hidden");
	toggleSubmit();
  progress = progress + 6.7;
  document.getElementById('prgrs').value= progress;
}

function toggleSubmit () {
	document.getElementById('submit').classList.remove("hidden");
}

function thankYou () {
	document.getElementById('description').classList.add("hidden");
  document.getElementById('survey-form').classList.add("hidden");
	document.getElementById('survey-form').reset();
	document.getElementById('thanks').classList.remove("hidden");
}

function checkValid(field1, field2) {
	if ( document.getElementById(field1).checkValidity()) {
		document.getElementById(field2).disabled = false;
	}
}

function checkSelectValid(){
	var selectChoice = document.getElementById('dropdown');
	if (selectChoice.value != '') {
		document.getElementById('number').disabled = false;
    }
}

window.onload = function() {
	document.getElementById('survey-form').onkeypress = function(e) {
		var key = e.charCode || e.keyCode || 0;     
		if (key == 13) {
		e.preventDefault();
		}
	}
}
              
            
!
999px

Console