Impossible typing test

Developer
Size
3,316 Kb
Views
14,168

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 Previews

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); }
}());
Impossible typing test - Script Codes
Impossible typing test - Script Codes
Home Page Home
Developer Rich Williams
Username toneworm
Uploaded December 07, 2022
Rating 3
Size 3,316 Kb
Views 14,168
Do you need developer help for Impossible typing test?

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!

Rich Williams (toneworm) Script Codes
Create amazing love letters 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!