Quiz
How do I make an quiz?
What is a quiz? How do you make a quiz? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.
Quiz - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Your Score: <span>0</span></h1> <ul> <li data-worth="1"> <div class="question"> Q. Who wrote Cats? </div> <div class="answer"> A. Andrew Lloyd Webber </div> <div class="buttons"> <a class="check button">Check Answer</a> <a class="right button">Correct?</a> </div> </li> <li data-worth="1"> <div class="question"> Q. Who is having their Last Session in Sydney this year? </div> <div class="answer"> A. Freud </div> <div class="buttons"> <a class="check button">Check Answer</a> <a class="right button">Correct?</a> </div> </li> <li data-worth="2"> <div class="question"> Q. Where is Jersey Boys playing? </div> <div class="answer"> A. Perth </div> <div class="buttons"> <a class="check button">Check Answer</a> <a class="right button">Correct?</a> </div> </li> <li data-worth="3"> <div class="question"> Q. What show was just announced from Brisbane? </div> <div class="answer"> A. Rocky Horror Show </div> <div class="buttons"> <a class="check button">Check Answer</a> <a class="right button">Correct?</a> </div> </li> </ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Quiz - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html { background: white; font-family: 'Open Sans', sans-serif; width: 640px;
}
li { box-sizing: border-box; float: left; list-style: none; padding: 20px; width: 280px; background: #fff; margin: 20px; background: #efefef;
}
.answer { display: none;
}
li.answered { background: #eee;
}
.buttons { padding-top: 20px;
}
.button { padding: 3px 10px; margin: 10px 0 0; display: inline-block; background: tomato; border: 1px solid #555; border-radius: 3px; curser: pointer;
}
.button:hover { background: #fa2600;
}
li.correct { background: lightgreen;
}
.right { display: none;
}
.answered .right { display: inline-block;
}
Quiz - Script Codes JS Codes
$('.check').on('click', function(){ group = $(this).closest('li'); group.find('.answer').toggle(); group.find('.question').toggle(); group.toggleClass('answered');
});
$('.right').on('click',function(){ group = $(this).closest('li'); group.toggleClass('correct'); score = +$('h1 span').html(); worth = +$(group).data('worth'); if($(group).hasClass('correct')){ score = score + worth; $('h1 span').html(score); } else { score = score - worth; $('h1 span').html(score); }
})
Developer | Matt Edwards |
Username | mtedwards |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,814 Kb |
Views | 34,408 |
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!
Name | Size |
Calendar | 3,834 Kb |
JQuery Star flashing effect | 2,487 Kb |
Angular Instagram test | 2,396 Kb |
Responsive layout with Fixed width Sidebar | 2,249 Kb |
JQuery lesson from Treehouse | 3,137 Kb |
JQuery YouTube Playlist | 2,120 Kb |
JQuery featured gallery | 7,630 Kb |
Css Skew background for triangular overlay | 2,636 Kb |
A Quiz, reveal answers and keep score | 3,189 Kb |
Basic jQuery Tabs | 2,555 Kb |
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!
Name | Username | Size |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
RSW | JordanC | 3,726 Kb |
Under construction | GhostRider | 1,642 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Count up | Alanshortis | 2,391 Kb |
Animated skewed panes | NyX | 4,462 Kb |
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!