The CodePen Quiz
How do I make an the codepen quiz?
A simple quiz for the folks using CodePen. It includes client-side form validation with JavaScript, animations and shapes using CSS, and hopefully an enjoyable experience for those that use it. . What is a the codepen quiz? How do you make a the codepen quiz? This script and codes were developed by Nick Hehr on 15 August 2022, Monday.
The CodePen Quiz Previews
The CodePen Quiz - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The CodePen Quiz</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ h1, legend { text-align: center;
}
input[type*='radio'], label { margin-left: 35%;
}
input[type*='submit'] { margin-left: 65%;
}
input[type*='submit'][value*='Try Again'] { margin-left: 0;
}
h2 { margin: 0; text-align: center;
}
p { text-align: right; margin-top: -80px;
}
div.answer { position: absolute; left: 50%; margin-left: -250px;
}
div.answer#incorrect { visibility: hidden;
}
div.answer#incorrect h2 { color: #c20000;
}
div.answer#correct { visibility: hidden;
}
div.answer#correct h2 { color: green;
}
.circle { background-color: #00d200; width: 100px; height: 100px; border-radius: 50%; position: relative; left: 100%; bottom: 75px; -moz-transform: scale(0.6); -ms-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6);
}
.circle#wrong { background: #ff2929;
}
#checkmark { background: white; width: 40px; height: 20px; position: relative; top: 50%; left: 50%; margin-bottom: 10px; margin-left: -20px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#checkmark::after { content: ""; width: 0; height: 0; background: white; border: 10px white solid; border-top: 32px white solid; position: relative; left: 20px; bottom: 7.5px;
}
#X { width: 100px; height: 20px; background: white; position: relative; top: 40px; left: 5px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#X::after { content: ""; width: 0; height: 0; border: 10px white solid; border-top: 70px white solid; position: relative; top: 38px; left: 35px;
}
.appear { visibility: visible !important;
}
.appear > h2 { animation: animateText 3s ease-out;
}
.appear > .circle { animation: animateCircle 3s ease-out;
}
.appear > .circle > .symbol { animation: animateSymbol 3s ease-out;
}
.appear > p { animation: animateText 3s ease-out;
}
@keyframes animateCircle { 0% { -moz-transform: scale(0.1) rotate(0deg); -ms-transform: scale(0.1) rotate(0deg); -webkit-transform: scale(0.1) rotate(0deg); transform: scale(0.1) rotate(0deg); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; box-shadow: 0px 0px 0px 0 #001a00; } 75% { -moz-transform: scale(0.9) rotate(630deg); -ms-transform: scale(0.9) rotate(630deg); -webkit-transform: scale(0.9) rotate(630deg); transform: scale(0.9) rotate(630deg); box-shadow: 4px 4px 10px 0px rgba(0, 26, 0, 0.8); } 100% { -moz-transform: scale(0.6) rotate(720deg); -ms-transform: scale(0.6) rotate(720deg); -webkit-transform: scale(0.6) rotate(720deg); transform: scale(0.6) rotate(720deg); box-shadow: 0px 0px 0px 0 #001a00; }
}
@keyframes animateSymbol { 0% { -moz-transform: scale(0.1) rotate(45deg); -ms-transform: scale(0.1) rotate(45deg); -webkit-transform: scale(0.1) rotate(45deg); transform: scale(0.1) rotate(45deg); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } 95% { -moz-transform: scale(1.2) rotate(45deg); -ms-transform: scale(1.2) rotate(45deg); -webkit-transform: scale(1.2) rotate(45deg); transform: scale(1.2) rotate(45deg); } 100% { -moz-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); }
}
@keyframes animateText { 0% { opacity: 0; } 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>The CodePen Quiz</h1>
<form action="#"> <fieldset> <legend>Do you enjoy using CodePen?</legend> <label for="radio-choice-1">Yes</label> <input type="radio" name="radio-choice" id="Yes" value="Yes" /> <label for="radio-choice-2">No</label> <input type="radio" name="radio-choice" id="No" value="No" /> <div> <input type="submit" value="Submit" /> </div> </fieldset>
</form>
<div class="answer" id="correct"> <h2>That is correct, sir/madam!</h2> <div class="circle" id="right"> <div class="symbol" id="checkmark"></div> </div>
</div>
<div class="answer" id="incorrect"> <h2>Sorry, that is not correct.</h2> <div class="circle" id="wrong"> <div class="symbol" id="X"></div> </div> <p>Please <input type="reset" value="Try Again" /></p>
</div> <script src="js/index.js"></script>
</body>
</html>
The CodePen Quiz - Script Codes CSS Codes
h1, legend { text-align: center;
}
input[type*='radio'], label { margin-left: 35%;
}
input[type*='submit'] { margin-left: 65%;
}
input[type*='submit'][value*='Try Again'] { margin-left: 0;
}
h2 { margin: 0; text-align: center;
}
p { text-align: right; margin-top: -80px;
}
div.answer { position: absolute; left: 50%; margin-left: -250px;
}
div.answer#incorrect { visibility: hidden;
}
div.answer#incorrect h2 { color: #c20000;
}
div.answer#correct { visibility: hidden;
}
div.answer#correct h2 { color: green;
}
.circle { background-color: #00d200; width: 100px; height: 100px; border-radius: 50%; position: relative; left: 100%; bottom: 75px; -moz-transform: scale(0.6); -ms-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6);
}
.circle#wrong { background: #ff2929;
}
#checkmark { background: white; width: 40px; height: 20px; position: relative; top: 50%; left: 50%; margin-bottom: 10px; margin-left: -20px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#checkmark::after { content: ""; width: 0; height: 0; background: white; border: 10px white solid; border-top: 32px white solid; position: relative; left: 20px; bottom: 7.5px;
}
#X { width: 100px; height: 20px; background: white; position: relative; top: 40px; left: 5px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
#X::after { content: ""; width: 0; height: 0; border: 10px white solid; border-top: 70px white solid; position: relative; top: 38px; left: 35px;
}
.appear { visibility: visible !important;
}
.appear > h2 { animation: animateText 3s ease-out;
}
.appear > .circle { animation: animateCircle 3s ease-out;
}
.appear > .circle > .symbol { animation: animateSymbol 3s ease-out;
}
.appear > p { animation: animateText 3s ease-out;
}
@keyframes animateCircle { 0% { -moz-transform: scale(0.1) rotate(0deg); -ms-transform: scale(0.1) rotate(0deg); -webkit-transform: scale(0.1) rotate(0deg); transform: scale(0.1) rotate(0deg); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; box-shadow: 0px 0px 0px 0 #001a00; } 75% { -moz-transform: scale(0.9) rotate(630deg); -ms-transform: scale(0.9) rotate(630deg); -webkit-transform: scale(0.9) rotate(630deg); transform: scale(0.9) rotate(630deg); box-shadow: 4px 4px 10px 0px rgba(0, 26, 0, 0.8); } 100% { -moz-transform: scale(0.6) rotate(720deg); -ms-transform: scale(0.6) rotate(720deg); -webkit-transform: scale(0.6) rotate(720deg); transform: scale(0.6) rotate(720deg); box-shadow: 0px 0px 0px 0 #001a00; }
}
@keyframes animateSymbol { 0% { -moz-transform: scale(0.1) rotate(45deg); -ms-transform: scale(0.1) rotate(45deg); -webkit-transform: scale(0.1) rotate(45deg); transform: scale(0.1) rotate(45deg); -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } 95% { -moz-transform: scale(1.2) rotate(45deg); -ms-transform: scale(1.2) rotate(45deg); -webkit-transform: scale(1.2) rotate(45deg); transform: scale(1.2) rotate(45deg); } 100% { -moz-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); -webkit-transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg); }
}
@keyframes animateText { 0% { opacity: 0; } 100% { opacity: 1; }
}
The CodePen Quiz - Script Codes JS Codes
var submit = document.querySelector('input[value*="Submit"]'), tryAgain = document.querySelector('input[value*="Try Again"]'), yes = document.getElementById('Yes'), no = document.getElementById('No'), correct = document.getElementById('correct'), incorrect = document.getElementById('incorrect');
submit.addEventListener('click', function(e){ if ( yes.checked ) { incorrect.classList.remove('appear'); correct.classList.add('appear'); } else if ( no.checked ) { correct.classList.remove('appear'); incorrect.classList.add('appear'); } else { alert( "Please pick an answer before submitting." ); }
}, false);
tryAgain.addEventListener('click', function(e) { correct.classList.remove('appear'); incorrect.classList.remove('appear'); yes.checked = false; no.checked = false;
}, false);
| Developer | Nick Hehr |
| Username | HipsterBrown |
| Uploaded | August 15, 2022 |
| Rating | 3 |
| Size | 4,944 Kb |
| Views | 54,648 |
Do you need developer help for The CodePen Quiz?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Nick Hehr (HipsterBrown) Script Codes
| Name | Size |
| Hexagonal Icon Backgrounds in CSS | 3,896 Kb |
| SVG Heart Animations with React | 5,579 Kb |
| Fixed in Fixed | 2,254 Kb |
| DogSight.js | 5,766 Kb |
| Triangular Pattern Background | 4,393 Kb |
| Sassy CodePen Icon | 4,401 Kb |
| Open Letter to YouTube | 3,146 Kb |
| Cubical Pattern Background | 4,467 Kb |
| Lettering Pure JS | 3,522 Kb |
| Welcome to Mavericks | 6,548 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Guidepopup | Wooljs | 3,747 Kb |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
| SVG Hover Animations | Kjbrum | 10,557 Kb |
| Single element checkbox | Ivijaygupta | 1,996 Kb |
| Pattern lab logo | TimPietrusky | 3,666 Kb |
| Hoi hoi | JohnTheCat | 7,248 Kb |
| Canvas snow | Win7killer | 2,572 Kb |
| Popup Modal | Aldlevine | 3,696 Kb |
| Form Labels | Bartuc | 2,717 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!