A Quiz, reveal answers and keep score
How do I make an a quiz, reveal answers and keep score?
A jQuery powered quiz. You set a Question, and Answer and a value.Click to reveal the answer and can also keep score if you got it right.. What is a a quiz, reveal answers and keep score? How do you make a a quiz, reveal answers and keep score? This script and codes were developed by Matt Edwards on 12 August 2022, Friday.
A Quiz, reveal answers and keep score - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Quiz, reveal answers and keep score</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Your Score: <span>0</span></h1>
<p class="message"></p>
<h3>Easy - 1 point</h3>
<div class="box" data-worth="1"> <div class="q"> Q. Name a spice </div> <div class="a"> A. Nutmeg <div class="options"> <a href="#" class="right">I got it right</a> <a href="#" clear="more">Learn More...</a> </div> <a class="slide" href="#">Show Answer</a> </div>
</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>
A Quiz, reveal answers and keep score - Script Codes CSS Codes
@charset "UTF-8";
* { box-sizing: border-box;
}
h3 { display: block; clear: both; padding: 20px 0 0;
}
.box { width: 300px; overflow: hidden; -moz-box-shadow: 0px 5px #333333; -webkit-box-shadow: 0px 5px #333333; box-shadow: 0px 5px #333333; margin: 10px; float: left;
}
.q { padding: 20px; background: #efefef; height: 80px; border-bottom: 1px solid #ddd;
}
.a { padding: 10px 20px; position: relative; background: #d4d4d4; height: 80px;
}
.a .options a { display: inline-block; margin: 15px 10px 0 0; padding: 5px 10px; background: #efefef; text-decoration: none;
}
.a .right { color: green;
}
.a a.slide { position: absolute; width: 300px; display: block; top: 0; left: 0; right: 0; bottom: 0; line-height: 80px; text-align: center; background: tomato; text-decoration: none; color: white; font-size: 1.5em; transition: all 1s;
}
.a a.slide:hover { background: #ff3814;
}
.a a.slide:after { content: ">"; position: absolute; font-size: 1em; color: white; top: 0; right: 0; display: block; height: 80px; width: 50px; background: rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.4);
}
a.open.slide { left: 249px;
}
a.open.slide:before { content: "<"; position: absolute; font-size: 1em; color: white; top: 0; left: 0; display: block; height: 80px; width: 50px; background: rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.4); border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.correct a.open.slide { background: green;
}
.correct a.open.slide:before { content: "✓";
}
A Quiz, reveal answers and keep score - Script Codes JS Codes
$('a').on('click',function(){ $(this).toggleClass('open');
});
$('.right').on('click',function(){ group = $(this).closest('.box'); 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 | 3,189 Kb |
Views | 38,456 |
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 |
Quiz | 2,814 Kb |
Responsive layout with Fixed width Sidebar | 2,249 Kb |
Angular Form JSON test | 2,504 Kb |
Css Skew background for triangular overlay | 2,636 Kb |
Basic jQuery Tabs | 2,555 Kb |
JQuery featured gallery | 7,630 Kb |
Angular Instagram test | 2,396 Kb |
JQuery .show .hide menu | 2,356 Kb |
Let it Rain | 2,746 Kb |
JQuery lesson from Treehouse | 3,137 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 |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
Simple Login Form | JoshBlackwood | 4,418 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!