Quizmaster

Developer
Chrisarmstrong
Size
5,888 Kb
Views
8,096
  1. Quizmaster Previews
  2. Quizmaster HTML Codes
  3. Quizmaster CSS Codes
  4. Quizmaster JS Codes

How do I make an quizmaster?

What is a quizmaster? How do you make a quizmaster? This script and codes were developed by Chrisarmstrong on 24 November 2022, Thursday.

Quizmaster Previews
IQ Test

Quizmaster - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quizmaster</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://flickity.metafizzy.co/flickity.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! */ body, html { margin: 0; padding: 0;
}
body { font-family: 'FranklinGothic URW';
}
.questions { background: #12B7A1; position: fixed; top: 48px; bottom: 0; left: 0; right: 0;
}
.question { width: 100%; text-align: center; padding: 0; overflow-y: scroll; transition: all 0.2s; position: fixed; top: 0; bottom: 0;
}
.question.scores { display: flex; justify-content: center; align-items: center; padding: 0;
}
.question.scores h1 { margin: 0; font-family: "ATC Overlook";
}
.question:after { content: "Tap to show answer"; display: block; position: fixed; bottom: 0px; height: 60px; width: 100%; line-height: 36px; color: rgba(255, 255, 255, 0.6); padding-top: 12px; box-sizing: border-box; font-family: "ATC Overlook"; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; transition: all 0.2s;
}
.question.show-answer:after { opacity: 0;
}
.question.show-answer .players { opacity: 1; transition: opacity 5s;
}
.question.show-answer .answer-text { top: 33vh;
}
.question.show-answer .answer-text:before { opacity: 1; transition: all 0.5s;
}
.question .question-text, .question .answer-text { font-size: 24px; line-height: 36px; color: white; min-height: 40vh; padding-top: 24px; padding: 24px; margin: 0; box-sizing: border-box;
}
.question .answer-text { background: rgba(0, 0, 0, 0.4); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)); position: fixed; width: 100%; top: calc(100vh - 108px); bottom: 0; overflow-y: scroll; transition: all 0.4s cubic-bezier(0.565, 1.65, 0.765, 0.88);
}
.question .answer-text:before { opacity: 0;
}
.question .question-text:before, .question .answer-text:before, .question .players:before { display: block; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; line-height: 36px; font-family: "ATC Overlook"; font-weight: bold; color: rgba(0, 0, 0, 0.4);
}
.question .question-text:before { content: "Question";
}
.question .answer-text:before { content: "Correct Answer"; color: rgba(255, 255, 255, 0.6);
}
.question form.players { opacity: 0;
}
.question form.players:before { content: "Who got it correct?"; color: rgba(255, 255, 255, 0.6); margin-top: 48px;
}
.question form.players input { display: block; position: fixed; left: -100px;
}
.question form.players input:checked + label { border: 4px solid white; padding-top: 10px; padding-bottom: 6px;
}
.question form.players label { background: #333; color: white; font-size: 24px; line-height: 36px; padding: 14px 24px 10px; border-radius: 100px; margin: 6px; display: inline-block; cursor: pointer;
}
.flickity-prev-next-button { display: none;
}
.flickity-page-dots { position: fixed; top: 0; height: 48px; display: flex; justify-content: center; align-items: center; background: white;
}
.flickity-page-dots .dot { opacity: 1; background: #ddd;
}
.flickity-page-dots .dot.is-selected { border: 6px double white; width: 10px; height: 10px; margin: 0 6px;
}
.flickity-page-dots .dot:last-child { border: none; background: none;
}
.flickity-page-dots .dot:last-child:before { content: "*"; font-family: "ATC Overlook"; font-size: 34px; line-height: 0px; position: relative; top: 11px; color: #ccc;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="questions gallery js-flickity"> <div class="question scores gallery-cell show-answer"> <div> <h1><span class="winner">Chris</span> won!</h1> <p class="restart">Play again</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://flickity.metafizzy.co/flickity.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quizmaster - Script Codes CSS Codes

body, html { margin: 0; padding: 0;
}
body { font-family: 'FranklinGothic URW';
}
.questions { background: #12B7A1; position: fixed; top: 48px; bottom: 0; left: 0; right: 0;
}
.question { width: 100%; text-align: center; padding: 0; overflow-y: scroll; transition: all 0.2s; position: fixed; top: 0; bottom: 0;
}
.question.scores { display: flex; justify-content: center; align-items: center; padding: 0;
}
.question.scores h1 { margin: 0; font-family: "ATC Overlook";
}
.question:after { content: "Tap to show answer"; display: block; position: fixed; bottom: 0px; height: 60px; width: 100%; line-height: 36px; color: rgba(255, 255, 255, 0.6); padding-top: 12px; box-sizing: border-box; font-family: "ATC Overlook"; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; transition: all 0.2s;
}
.question.show-answer:after { opacity: 0;
}
.question.show-answer .players { opacity: 1; transition: opacity 5s;
}
.question.show-answer .answer-text { top: 33vh;
}
.question.show-answer .answer-text:before { opacity: 1; transition: all 0.5s;
}
.question .question-text, .question .answer-text { font-size: 24px; line-height: 36px; color: white; min-height: 40vh; padding-top: 24px; padding: 24px; margin: 0; box-sizing: border-box;
}
.question .answer-text { background: rgba(0, 0, 0, 0.4); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8)); position: fixed; width: 100%; top: calc(100vh - 108px); bottom: 0; overflow-y: scroll; transition: all 0.4s cubic-bezier(0.565, 1.65, 0.765, 0.88);
}
.question .answer-text:before { opacity: 0;
}
.question .question-text:before, .question .answer-text:before, .question .players:before { display: block; text-transform: uppercase; letter-spacing: 1px; font-size: 18px; line-height: 36px; font-family: "ATC Overlook"; font-weight: bold; color: rgba(0, 0, 0, 0.4);
}
.question .question-text:before { content: "Question";
}
.question .answer-text:before { content: "Correct Answer"; color: rgba(255, 255, 255, 0.6);
}
.question form.players { opacity: 0;
}
.question form.players:before { content: "Who got it correct?"; color: rgba(255, 255, 255, 0.6); margin-top: 48px;
}
.question form.players input { display: block; position: fixed; left: -100px;
}
.question form.players input:checked + label { border: 4px solid white; padding-top: 10px; padding-bottom: 6px;
}
.question form.players label { background: #333; color: white; font-size: 24px; line-height: 36px; padding: 14px 24px 10px; border-radius: 100px; margin: 6px; display: inline-block; cursor: pointer;
}
.flickity-prev-next-button { display: none;
}
.flickity-page-dots { position: fixed; top: 0; height: 48px; display: flex; justify-content: center; align-items: center; background: white;
}
.flickity-page-dots .dot { opacity: 1; background: #ddd;
}
.flickity-page-dots .dot.is-selected { border: 6px double white; width: 10px; height: 10px; margin: 0 6px;
}
.flickity-page-dots .dot:last-child { border: none; background: none;
}
.flickity-page-dots .dot:last-child:before { content: "*"; font-family: "ATC Overlook"; font-size: 34px; line-height: 0px; position: relative; top: 11px; color: #ccc;
}

Quizmaster - Script Codes JS Codes

var players = [ ['Chris', 0, 'E96680'], ['Rebecca', 0, '9B5F89'], ['John', 0, '625A8E'], ['Sarah', 0, '0C5197']
];
var questions = [ ['How many years did the Hundred Years War last?', '116'], ['How many feet are there in a fathom?', 'Six'], ['What type of creature is a dugite?', 'Snake'], ['Who painted The Water Lily Pool?', 'Claude Monet'], ['In the human body what is the hallux?', 'Big toe'], ['In which year did Henry VIII become King of England?', '1509'], ['Madame de Pompadour was the mistress of which French King?', 'Louis XV'],
];
startQuiz();
function startQuiz() { var i = questions.length; for (i; i > 0; i--) { $('.questions').prepend('<div class="question gallery-cell" id="question' + i + '"><div class="question-text">' + questions[i - 1][0] + '</div><div class="answer-text">' + questions[i - 1][1] + '<form class="players"></form></div></div>'); for (var p = players.length; p > 0; p--) { $('#question' + i + ' form.players').prepend('<input id="question' + i + 'player' + p + '" value="player' + p + '" name="question' + i + '" type="radio" style="background:#' + players[p - 1][2] + '"><label style="background:#' + players[p - 1][2] + '" for="question' + i + 'player' + p + '">' + players[p - 1][0] + '</label><br/>'); } }
}
$('.players input').on("click", function() { var currentQuestion = $('.dot.is-selected').index(); var correctPlayer; if ($(this).index() == 0) { correctPlayer = $(this).index(); } else { correctPlayer = $(this).index() / 3; } questions[currentQuestion][2] = correctPlayer; calculateScores(); var playerColor = $(this).css('background-color'); $('li.dot.is-selected').css('background-color', playerColor) setTimeout(function() { $('.gallery').flickity('next') }, 500);
})
$('.question').on('click', function() { $(this).addClass('show-answer');
})
function calculateScores() { for (var p = 0; p < players.length; p++) { players[p][1] = 0; } for (var q = 0; q < questions.length; q++) { if (questions[q][2]) { var correctPlayer = questions[q][2]; var score = parseInt(players[correctPlayer][1]) players[correctPlayer][1] = score+1; if (q = questions.length) { console.log(players); } } }
}
function restart() { $('.question.show-answer').removeClass('show-answer'); $('input:checked').removeAttr('checked'); $('.gallery').flickity('select', 0); $('.dot:not(:last-child)').css("background-color", '#ddd')
}
$('.restart').click(function(){ restart();
})
Quizmaster - Script Codes
Quizmaster - Script Codes
Home Page Home
Developer Chrisarmstrong
Username chrisarmstrong
Uploaded November 24, 2022
Rating 3
Size 5,888 Kb
Views 8,096
Do you need developer help for Quizmaster?

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!

Chrisarmstrong (chrisarmstrong) Script Codes
Name
A Pointless Experiment
Juxtapose
Find home
Teleprompter
Mondrian
Platoon
WW1 Loader
Stock Market
The Auctioneer
Mondrian 2
Create amazing art & images 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!