Skip to content

Instantly share code, notes, and snippets.

@elephantatech

elephantatech/wordgen.html

Created September 28, 2023 12:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elephantatech/9a3e6c497bc8e6754ecabdf794c1df6b to your computer and use it in GitHub Desktop.
Save elephantatech/9a3e6c497bc8e6754ecabdf794c1df6b to your computer and use it in GitHub Desktop.
Download ZIP
word generator with scoring is the it is read correctly
Raw
wordgen.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Word Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0e6f4;
/* Pastel Purple */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
color: #ff85a2;
/* Pastel Pink */
}
#word-container {
font-size: 4vw;
/* 4% of the viewport width */
margin-top: 20px;
padding: 20px;
background-color: #a7e9af;
/* Pastel Green */
border-radius: 10px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin-top: 10px;
background-color: #ff85a2;
/* Pastel Pink */
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
z-index: 2;
/* Ensure buttons are above other elements */
}
select {
font-size: 16px;
margin-top: 10px;
background-color: #f0e6f4;
/* Pastel Purple */
border: none;
}
#score {
font-size: 24px;
margin-top: 20px;
}
/* Position the "correct" and "incorrect" word lists */
#correct-words,
#incorrect-words {
position: absolute;
max-width: 300px;
}
#correct-words {
left: 10px;
/* Adjust the left position as needed */
top: 120px;
/* Adjust the top position as needed */
color: #7be16e;
}
#incorrect-words {
right: 10px;
/* Adjust the right position as needed */
top: 120px;
/* Adjust the top position as needed */
color: #ff7f7f;
}
</style>
</head>
<body>
<h1>Words Generator</h1>
<div id="word-container">
<p id="word">Select a week and click the button to generate a sight word.</p>
</div>
<button id="mark-incorrect-button">Mark Incorrect</button>
<button id="mark-correct-button">Mark Correct</button>
<div id="score">Score: 0</div>
<div>
<div id="correct-words">
<h2>Correct Words</h2>
<ul id="correct-word-list">
<!-- Correct words will be displayed here -->
</ul>
</div>
<div id="incorrect-words">
<h2>Incorrect Words</h2>
<ul id="incorrect-word-list">
<!-- Incorrect words will be displayed here -->
</ul>
</div>
</div>
<script>
// Merge all sight words into a single array
const sightWords = [
"over",
"new",
"art",
"take",
"only",
"car",
"park",
"hard",
"barn",
"card",
"shark",
"dark",
"oh",
"eyes",
"date",
"hold",
"little",
"work",
"know",
"place",
"years",
"rain",
"mail",
"wait",
"paint",
"chant",
"paid",
"sail",
"goods",
"services",
"consumer",
"producer",
"live",
"me",
"cool",
"give",
"most",
"saw",
"law",
"raw",
"jar",
"straw",
"draw",
"country",
"ocean",
"title",
"skip",
"change",
"very",
"after",
"things",
"our",
"just",
"girl",
"dirt",
"shirt",
"third",
"thirst",
"birth",
"yellow",
"add",
"got",
"life",
"cycle",
"pole",
"wire",
"fight",
"seen",
"eat",
"right",
"might",
"sight",
"tight",
"flight",
"bright",
"lost",
"far",
"push",
"pull",
"resource",
"say",
"great",
"four",
"help",
"through",
"gold",
"cold",
"fold",
"mold",
"sold",
"told",
"subtract",
"answer",
"baby",
"parent",
"stages",
"late",
"before",
"line",
"side",
"too",
"loud",
"round",
"found",
"shout",
"count",
"gave",
"urban",
"suburban",
"rural",
"community",
"touch",
"means",
"old",
"any",
"same",
"corn",
"blue",
"true",
"clue",
"glue",
"due",
"argue",
"listen",
"song",
"cause",
"speak",
"kind",
"boy",
"soon",
"came",
"want",
"eggs",
"nurse",
"curve",
"turn",
"burn",
"curl",
"purse",
"growth",
"affect",
"fish",
"mammal",
"fruit",
"also",
"beat",
"seat",
"three",
"small",
"mean",
"clean",
"peak",
"dream",
"beach",
"team",
"length",
"weight",
"height",
"meat",
"distance",
"wear",
"put",
"end",
"does",
"another",
"head",
"bread",
"dead",
"sweat",
"citizen",
"spread",
"deal",
"room",
"break",
"weather",
"soil",
"well",
"large",
"cook",
"sent",
"even",
"grew",
"stew",
"drew",
"chew",
"few",
"brew",
"ever",
"unit",
"violet",
"color",
"shape",
"the",
"of",
"and",
"that",
"cat",
"mat",
"sat",
"hat",
"to",
"in",
"is",
"you",
"man",
"can",
"ran",
"pan",
"than",
"it",
"he",
"was",
"map",
"cap",
"nap",
"tap",
"for",
"on",
"are",
"as",
"back",
"sack",
"black",
"snack",
"with",
"his",
"they",
"pit",
"sit",
"hit",
"bit",
"fit",
"at",
"be",
"this",
"have",
"big",
"pig",
"dig",
"wig",
"from",
"or",
"one",
"had",
"pin",
"thin",
"spin",
"skin",
"by",
"words",
"but",
"not",
"sick",
"kick",
"brick",
"stick",
"what",
"all",
"were",
"we",
"hot",
"pot",
"not",
"lot",
"when",
"your",
"pop",
"said",
"mop",
"top",
"hop",
"drop",
"there",
"use",
"an",
"each",
"job",
"mob",
"cob",
"rob",
"which",
"she",
"do",
"how",
"sock",
"rock",
"block",
"their",
"if",
"will",
"up",
"cut",
"nut",
"hut",
"shut",
"other",
"about",
"out",
"many",
"bug",
"hug",
"rug",
"mug",
"then",
"them",
"these",
"so",
"sun",
"run",
"fun",
"bun",
"some",
"her",
"would",
"make",
"duck",
"luck",
"suck",
"stuck",
"like",
"him",
"into",
"time",
"pet",
"get",
"wet",
"let",
"has",
"look",
"two",
"more",
"red",
"bed",
"fed",
"sled",
"write",
"go",
"see",
"number",
"men",
"hen",
"pen",
"ten",
"no",
"bell",
"could",
"people",
"tell",
"fell",
"sell",
"well",
"my",
"ant",
"first",
"water",
"bad",
"bat",
"glad",
"mad",
"been",
"called",
"who",
"oil",
"win",
"lip",
"kid",
"ship",
"dog",
"now",
"find",
"long",
"mom",
"fox",
"chop",
"shop",
"down",
"day",
"did",
"set",
"bus",
"truck",
"must",
"come",
"made",
"may",
"part",
"web",
"legs",
"less",
"shell",
"game",
"page",
"race",
"tape",
"name",
"shake",
"tame",
"animal",
"way",
"pay",
"stay",
"clay",
"play",
"tray",
"roots",
"tree",
"nice",
"drive",
"mine",
"wise",
"dime",
"five",
"lime",
"nest",
"dry",
"cry",
"sky",
"shy",
"spy",
"try",
"light",
"soil",
"nose",
"bone",
"code",
"spoke",
"hole",
"note",
"weather",
"rose",
"low",
"snow",
"grow",
"flow",
"show",
"blow",
"above",
"below",
"coat",
"boat",
"float",
"soak",
"load",
"soap",
"stop",
"trip",
"hook",
"took",
"good",
"stood",
"wood",
"foot",
"gas",
"heat",
"cow",
"plow",
"brown",
"town",
"clown",
"tower",
"sure",
"vote",
"moon",
"spoon",
"tooth",
"broom",
"roof",
"pool",
"huge",
"ice",
"deep",
"feel",
"green",
"seed",
"need",
"free",
"grass",
"summer",
];
let correctWords = [];
let incorrectWords = [];
let score = 0;
// Get HTML elements
const wordContainer = document.getElementById("word-container");
const markIncorrectButton = document.getElementById("mark-incorrect-button");
const markCorrectButton = document.getElementById("mark-correct-button");
const weekSelector = document.getElementById("week-selector");
const scoreElement = document.getElementById("score");
const correctWordList = document.getElementById("correct-word-list");
const incorrectWordList = document.getElementById("incorrect-word-list");
// Function to generate and display a random sight word
function generateSightWord() {
if (sightWords.length === 0) {
wordContainer.innerHTML = "<p id='word'>All words answered!</p>";
markCorrectButton.style.display = "none";
markIncorrectButton.style.display = "none";
scoreElement.style.display = "block"; // Show the score
return;
}
const randomIndex = Math.floor(Math.random() * sightWords.length);
const randomWord = sightWords[randomIndex];
// Update the word display
wordContainer.innerHTML = `<p id="word">${randomWord}</p>`;
markCorrectButton.style.display = "block"; // Show the "Mark Correct" button
markIncorrectButton.style.display = "block"; // Show the "Mark Incorrect" button
scoreElement.style.display = "block"; // Hide the score
// Add a click event listener to mark the word as correct
markCorrectButton.onclick = function () {
correctWords.push(randomWord);
score += 1;
scoreElement.innerText = `Score: ${score}`;
sightWords.splice(randomIndex, 1); // Remove the word from the sightWords array
markCorrectButton.style.display = "none"; // Hide the "Mark Correct" button
markIncorrectButton.style.display = "none"; // Hide the "Mark Incorrect" button
scoreElement.style.display = "block"; // Show the score
generateSightWord(); // Generate another word
// Update the correct word list
const listItem = document.createElement("li");
listItem.innerText = randomWord;
correctWordList.appendChild(listItem);
};
// Add a click event listener to mark the word as incorrect
markIncorrectButton.onclick = function () {
incorrectWords.push(randomWord); // Mark as answered but incorrect
score -= 1; // Subtract 1 from the score for an incorrect answer
scoreElement.innerText = `Score: ${score}`;
sightWords.splice(randomIndex, 1); // Remove the word from the sightWords array
markCorrectButton.style.display = "none"; // Hide the "Mark Correct" button
markIncorrectButton.style.display = "none"; // Hide the "Mark Incorrect" button
scoreElement.style.display = "block"; // Show the score
generateSightWord(); // Generate another word
// Update the incorrect word list
const listItem = document.createElement("li");
listItem.innerText = randomWord;
incorrectWordList.appendChild(listItem);
};
}
// Initially generate a random sight word
generateSightWord();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment