Impossible typing test
How do I make an impossible typing test?
Typing test created in a hateful mood.. What is a impossible typing test? How do you make a impossible typing test? This script and codes were developed by Rich Williams on 07 December 2022, Wednesday.
Impossible typing test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Impossible typing test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.0/css/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <h1>Typing test <small class="level-counter"></small></h1> </div> <div class="row"> <h3 class="subheader">Type the following:</h3> <p class="copy-text panel callout"></p> </div> <div class="row"> <textarea name="" id="" cols="30" rows="5" class="user-input"></textarea> <div class="row"> <h2 class="results-header"></h2> <button class="cta button"></button> <h3 class="subheader">Results:</h3> <div class="results callout panel"></div> </div> </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>
Impossible typing test - Script Codes CSS Codes
.container { padding: 10px;
}
.results-header, .cta { display: inline-block;
}
.cta { margin-left: 20px;
}
.panel.done { color: #4f8a10; background-color: #dff2bf; border-color: #4f8a10;
}
.panel.pending { /*color: #9f6000; background-color: #feefb3;*/
}
.panel.fail { color: #d8000c; background-color: #ffbaba; border-color: #d8000c;
}
Impossible typing test - Script Codes JS Codes
var data = { "levels" : [ { "id" : 1, "modifier" : 0.99, "text" : "Peter Piper picked a peck of pickled peppers." }, { "id" : 2, "modifier" : 0.97, "text" : "I saw Susie sitting in a shoe shine shop. Where she sits she shines, and where she shines she sits." }, { "id" : 3, "modifier" : 0.95, "text" : "Denise sees the fleece, Denise sees the fleas. At least Denise could sneeze and feed and freeze the fleas." }, { "id" : 3, "modifier" : 0.85, "text" : "There was a fisherman named Fisher who fished for some fish in a fissure. Till a fish with a grin, pulled the fisherman in. Now they're fishing the fissure for Fisher." } ]
};
(function () { // DOM objs var $input = $(".user-input"), $results = $(".results"), $copyText = $(".copy-text"), $resultsHeader = $(".results-header"), $cta = $(".cta"), $levelCounter = $(".level-counter"); var copyText, fail, levelCounter = 1, levels = data.levels, level; loadLevel(); $input.on("keypress", function (e) { if ( !fail ) { var rdm = Math.random() > level.modifier, charCode = e.charCode; if ( rdm ) { var i = Math.floor(Math.random() * 61), j = 0; if ( i <= 9 ) { j = i + 48 } else if ( i > 9 && i <= 35 ) { j = i + 65 - 10; } else { j = i + 97 - 36; } charCode = j; } $results.append(String.fromCharCode(charCode)); var resultsText = $results.text(); if ( resultsText === copyText.slice(0, resultsText.length)) { $results.addClass("pending"); } else { fail = true; $resultsHeader.text("Fail."); $cta.html("Start again?").show(); $results.removeClass("pending").addClass("fail"); levelCounter = 1; } if ( $results.text().length >= copyText.length ) { $resultsHeader.text("Congrats"); $results.removeClass("pending").addClass("done"); if ( levels.length <= levelCounter ) { $cta.html("You somehow completed this game. Click to restart.").show(); levelCounter = 1; } else { $cta.html("Next level.").show(); levelCounter += 1; } } } }); $cta.on("click", loadLevel); function loadLevel () { level = levels[levelCounter - 1]; // reset reset(); } function reset () { // hide button $cta.hide(); // clear elements $input.val(""); $results.html("").removeClass("pending fail done"); $resultsHeader.html(""); $levelCounter.text("(Level " + level.id + ")"); // reset vars copyText = level.text; fail = false; // add copy text to input $copyText.text(copyText); }
}());
Developer | Rich Williams |
Username | toneworm |
Uploaded | December 07, 2022 |
Rating | 3 |
Size | 3,316 Kb |
Views | 14,168 |
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 |
Basic bar graph of frequency of letters in a piece of text | 3,636 Kb |
Horrible looking fadey transition tabs | 4,246 Kb |
Weird glowy CSS3 game | 3,684 Kb |
Dichotomiser | 2,875 Kb |
Reverb keyboard | 4,507 Kb |
Meter timer game | 2,864 Kb |
Text word map generator | 2,264 Kb |
D3 simple interaction test | 2,327 Kb |
Trump translator | 3,437 Kb |
Little box shadow man and sun | 3,085 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 |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Cool audio | Bigliam | 1,868 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Voting App - register | MatheusLima92 | 1,948 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!