Lightweight Quiz Widget

Developer
Joshua P. Larson
Size
4,596 Kb
Views
48,576
  1. Lightweight Quiz Widget Previews
  2. Lightweight Quiz Widget HTML Codes
  3. Lightweight Quiz Widget CSS Codes
  4. Lightweight Quiz Widget JS Codes

How do I make an lightweight quiz widget?

Just a quick prototype of a lightweight quiz widget built with Javascript. . What is a lightweight quiz widget? How do you make a lightweight quiz widget? This script and codes were developed by Joshua P. Larson on 23 July 2022, Saturday.

Lightweight Quiz Widget Previews
IQ Test

Lightweight Quiz Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lightweight Quiz Widget</title> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
body { background: linear-gradient(#666, #333); padding: 1em;
}
.quiz { max-width: 40rem; margin: 2rem auto; background: #efefef; border-radius: 5px; overflow: hidden;
}
h2 { font-weight: 100; padding: 0.5em; background: #fafafa; margin: 0;
}
.questions { font-family: Georgia, serif; font-style: italic; font-size: 1.2em; padding: 1em;
}
@media all and (min-width: 30em) { .questions { width: 70%; }
}
.answers { background: #333; color: #fff; overflow: auto;
}
.answers input { display: none;
}
.answers input:checked ~ label { background: radial-gradient(#000000, #333333);
}
.answers label { display: block; float: left; width: 50%; padding: 1em; cursor: pointer; font-weight: 100; text-transform: uppercase; text-align: center;
}
@media all and (min-width: 30em) { .answers { width: 30%; } .answers label { float: none; width: 100%; }
}
.response { background: #ccc; font-weight: 100; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out;
}
.response.open { padding: 1em; opacity: 1; max-height: 500px;
}
button { background: #3bb395; display: block; color: #fff; text-transform: uppercase; font-size: 0.9em; padding: 1em; border: 0; width: 100%;
}
button:hover { background: #2e8d75;
}
@media all and (min-width: 30em) { .qa { display: flex; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="quiz"> <h2>Should you go to college in Iowa?</h2> <div class="qa"> <div class="questions"></div> <div class="answers"> <div class="answer"> <input type="radio" name="answer" value="yes" id="yes" /><label for="yes"> Yes</label> </div> <div class="answer"> <input type="radio" name="answer" value="no" id="no" /><label for="no"> No</label> </div> </div> </div> <div class="response"></div> <button id="next">Next</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Lightweight Quiz Widget - Script Codes CSS Codes

*, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
body { background: linear-gradient(#666, #333); padding: 1em;
}
.quiz { max-width: 40rem; margin: 2rem auto; background: #efefef; border-radius: 5px; overflow: hidden;
}
h2 { font-weight: 100; padding: 0.5em; background: #fafafa; margin: 0;
}
.questions { font-family: Georgia, serif; font-style: italic; font-size: 1.2em; padding: 1em;
}
@media all and (min-width: 30em) { .questions { width: 70%; }
}
.answers { background: #333; color: #fff; overflow: auto;
}
.answers input { display: none;
}
.answers input:checked ~ label { background: radial-gradient(#000000, #333333);
}
.answers label { display: block; float: left; width: 50%; padding: 1em; cursor: pointer; font-weight: 100; text-transform: uppercase; text-align: center;
}
@media all and (min-width: 30em) { .answers { width: 30%; } .answers label { float: none; width: 100%; }
}
.response { background: #ccc; font-weight: 100; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out;
}
.response.open { padding: 1em; opacity: 1; max-height: 500px;
}
button { background: #3bb395; display: block; color: #fff; text-transform: uppercase; font-size: 0.9em; padding: 1em; border: 0; width: 100%;
}
button:hover { background: #2e8d75;
}
@media all and (min-width: 30em) { .qa { display: flex; }
}

Lightweight Quiz Widget - Script Codes JS Codes

/** * Want to fork this? * Just click Fork above and change the questions below to your liking. * * TODO: * Maybe make a progress tracker at the bottom with total # of questions. */
var questions = [ { "q": "Do you like both hot and cold weather?", "a": { "yes": "Good! It's both hot and cold in Iowa.", "no": "Well... you'll get at least one of your favorite seasons!" } }, { "q": "Do you like activities?", "a": { "yes": "There are plenty of things to do in Iowa!", "no": "You'll be so busy having fun that you won't notice!" } }, { "q": "Do you like the party atmosphere?", "a": { "yes": "There's plenty of that inner-city feel in Des Moines, Ames, and Iowa City.", "no": "You can go roam the countryside if you want!" } }, { "q": "Do you like a quiet, rural atmosphere?", "a": { "yes": "Awesome. You can head 10-20 miles out of any city and get to a wide, free-flowing countryside.", "no": "Well... you can stay in the city then." } }
];
var numQuestion = -1, $questions = $('.questions'), $response = $('.response');
var loadNewQuestion = function() { $questions.text(questions[numQuestion].q); $response.html('').removeClass('open'); $('input').attr({ checked: false }); console.log(numQuestion, questions.length); if ( (numQuestion + 1) === questions.length ) { $('button').css('display', 'none'); console.log('last q'); }
};
$(document).ready(function() { numQuestion++; loadNewQuestion(); $('input').on('change', function() { var answer = $('input:checked').val(); $response.addClass('open'); $response.text(questions[numQuestion].a[answer]); }); $('#next').on('click', function() { numQuestion++; loadNewQuestion(); });
});
Lightweight Quiz Widget - Script Codes
Lightweight Quiz Widget - Script Codes
Home Page Home
Developer Joshua P. Larson
Username jplhomer
Uploaded July 23, 2022
Rating 3.5
Size 4,596 Kb
Views 48,576
Do you need developer help for Lightweight Quiz Widget?

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!

Joshua P. Larson (jplhomer) Script Codes
Name
Verge-Style Homepage Tiles
Responsive HTML Timeline
Seamless Scrolling Background
Fixed Nav HoverIntent Example
Displaying a Google Street View of your current location
Populate Native HTML Datalist with AJAX
Hey React
CSS-Only Art Direction
Animated Donut Chart
JS Geolocator
Create amazing marketing copy 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!