2c:null 2d:["$","title",null,{"children":"Final Exam | Ghson Alotibi | Observable"}] 32:T4e4,

Wordle Solver

Correct Letters (Green, in correct position):

Misplaced Letters (Yellow, wrong position):

Excluded Letters (Gray, not in word):

Matching Words:

33:T646,document.getElementById('findWords').addEventListener('click', () => { // Collect inputs const greenInputs = Array.from(document.querySelectorAll('.green input')).map(input => input.value.toLowerCase()); const yellowInputs = Array.from(document.querySelectorAll('.yellow input')).map(input => input.value.toLowerCase()); const excludedInput = document.querySelector('.gray input').value.toLowerCase(); // Filter words const matchingWords = wordArray.filter(word => { // Check green letters for (let i = 0; i < greenInputs.length; i++) { if (greenInputs[i] && word[i] !== greenInputs[i]) return false; } // Check yellow letters for (let yellow of yellowInputs) { if (yellow && (!word.includes(yellow) || word.indexOf(yellow) === yellowInputs.indexOf(yellow))) return false; } // Check excluded letters for (let excluded of excludedInput) { if (word.includes(excluded)) return false; } return true; }); // Display results const resultsList = document.getElementById('wordList'); resultsList.innerHTML = ''; if (matchingWords.length > 0) { matchingWords.forEach(word => { const li = document.createElement('li'); li.textContent = word; resultsList.appendChild(li); }); } else { resultsList.innerHTML = '

No matching words found.

'; } });34:Tece,{ let heatmapData = Array.from("abcdefghijklmnopqrstuvwxyz", (letter) => { return Array.from({ length: 5 }, (_, position) => ({ letter, position: position + 1, frequency: 0 // Start with zero frequency })); }).flat(); // Function to update the heatmap based on game state and wordArray function updateHeatmapFromGame() { // Ensure heatmapData is defined if (!heatmapData || heatmapData.length === 0) { console.error("heatmapData is not initialized."); return; } // Collect inputs from the game const greenInputs = Array.from(document.querySelectorAll(".green input")).map( (input) => input.value.toLowerCase() ); const yellowInputs = Array.from(document.querySelectorAll(".yellow input")).map( (input) => input.value.toLowerCase() ); const excludedInput = document .querySelector(".gray input") .value.toLowerCase(); // Reset frequencies heatmapData.forEach((d) => (d.frequency = 0)); // Filter wordArray based on inputs const filteredWords = wordArray.filter((word) => { // Check green letters for (let i = 0; i < greenInputs.length; i++) { if (greenInputs[i] && word[i] !== greenInputs[i]) return false; } // Check yellow letters for (let yellow of yellowInputs) { if (yellow && (!word.includes(yellow) || word.indexOf(yellow) === yellowInputs.indexOf(yellow))) { return false; } } // Check excluded letters for (let excluded of excludedInput) { if (word.includes(excluded)) return false; } return true; }); // Update heatmap frequencies based on filtered words filteredWords.forEach((word) => { word.split("").forEach((letter, index) => { const cell = heatmapData.find( (d) => d.letter === letter && d.position === index + 1 ); if (cell) cell.frequency += 1; }); }); // Redraw the heatmap drawHeatmap(); } // Function to draw the heatmap function drawHeatmap() { const heatmapPlot = Plot.plot({ marks: [ Plot.rect(heatmapData, { x: "position", y: "letter", fill: "frequency", title: (d) => `${d.letter} (Position ${d.position}): ${d.frequency}` }), Plot.text(heatmapData, { x: "position", y: "letter", text: "letter", fill: "white", dy: 0, dx: 0, fontSize: 14 }) ], color: { legend: true, scheme: "plasma", label: "Frequency" }, x: { label: "Position in Word", domain: [1, 2, 3, 4, 5], ticks: [1, 2, 3, 4, 5] }, y: { label: "Alphabet", domain: Array.from("abcdefghijklmnopqrstuvwxyz").reverse() }, marginLeft: 60, marginBottom: 60 }); // Replace the old heatmap with the new one const container = document.getElementById("heatmapContainer"); if (container) { container.innerHTML = ""; container.appendChild(heatmapPlot); } else { console.error("Heatmap container not found."); } } // Attach the update function to the "Find Words" button document.addEventListener("DOMContentLoaded", () => { const findWordsButton = document.getElementById("findWords"); if (findWordsButton) { findWordsButton.addEventListener("click", () => { updateHeatmapFromGame(); }); } else { console.error("The button with id 'findWords' was not found in the DOM."); } // Create a container for the heatmap let heatmapContainer = document.getElementById("heatmapContainer"); if (!heatmapContainer) { heatmapContainer = document.createElement("div"); heatmapContainer.id = "heatmapContainer"; heatmapContainer.style.marginTop = "30px"; document.body.appendChild(heatmapContainer); } // Initial draw of the heatmap drawHeatmap(); }); }35:T93b, ## overview - This final exam is designed to reinforce the knowledge you have gained so far - You are permitted to use ChatGPT and Google search for assistance; however, you must submit the chat log along with your exam - Any code that is copied must include a comment referencing the source URL - Communication with any real person during the exam is prohibited ## ChatGPT - open book exam with ChatGPT - when using ChatGPT, communicate entirely through words, as if you are describing something that exists only in your imagination and cannot be seen, even if I provide you with images. - use only text for ChatGPT (e.g., no upload of images) - a shared ChatGPT link must be submitted ## grading - grades based on how effectively you integrate the topics covered in this course - ⭐️ code elegance is valued. Aim for clarity, efficiency, and simplicity in your solutions. - before submitting, do review your code and remove unnecessary segments, including those generated by ChatGPT ## grading - where possible, use what we learn in this class (e.g., use Observable Plot instead of Plotly library) - avoid using methods or tools that were not part of our course materials - this is similar to the "hacker's mindset", which emphasizes solving problems within a constrained set of resources or tools - in real life, these constraints might arise from system limitations or the need to collaborate with team members who are only familiar with certain tools ## review of homework [link to Week 11](https://drive.google.com/file/d/1e2hyvlD82CT3uB2OXtDBMYhiuDulKE0l/view?usp=drive_link) ## Final Exam Question - write an *Observable* webApp to *solve* Wordle - Use the user interface that I provide, and add the relevant JS code and any other neccessary HTML elements / id / class - Let the user inputs the constraints (i.e., specifiy the green, yellow, and grey letters, and the location where applicable) - Green letters (correct letters in their exact positions) - Yellow letters (correct letters in incorrect positions) - Grey letters (incorrect letters) ## Final Exam Question - your webApp should output a list of possible words that satisfy those constraints - and show a heatmap using Plot.cell that updates with the filtered list - *Note*: Fit your JS code to work with the provided user interface (and not the other way round) 36:[] 30:{"id":"0c83e3ecc7349625","slug":null,"title":"Final Exam","thumbnail":"496f8a117b9dde7f62018bbe5e1c1984c80a43709bc281001667a1d6d0ae8002","access_level":"public","create_time":"$D2024-12-05T03:23:26.054Z","update_time":"$D2024-12-06T02:09:32.049Z","view_time":null,"first_public_time":"$D2024-12-05T05:45:29.348Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"99b836951aad53eb","login":"ghson-alotibi","name":"Ghson Alotibi","avatar_url":"https://avatars-next.observableusercontent.com/97c88ae81726f888cd081587b04380097c35f89f4fe681dee85382c4a64141fb","tier":"starter_2024"},"version":158,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c19dbaf9004eacb7","login":"ghson-alotibi","name":"Ghson Alotibi","avatar_url":"https://avatars-next.observableusercontent.com/38714a00a4666620e0c07e20d8df4b2cafd8c48ff7230c120aa6866cc29c06a1","tier":null}],"members":[{"type":"team","id":"99b836951aad53eb","login":"ghson-alotibi","name":"Ghson Alotibi","avatar_url":"https://avatars-next.observableusercontent.com/97c88ae81726f888cd081587b04380097c35f89f4fe681dee85382c4a64141fb","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c19dbaf9004eacb7","login":"ghson-alotibi","name":"Ghson Alotibi","avatar_url":"https://avatars-next.observableusercontent.com/38714a00a4666620e0c07e20d8df4b2cafd8c48ff7230c120aa6866cc29c06a1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Final Exam","cells":[{"id":0,"value":"# Final Exam","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"wordArray = d3.csv(\"https://raw.githubusercontent.com/steve-kasica/wordle-words/master/wordle.csv\", w => w.word);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Inputs.table (wordArray)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"wordArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"wordArray","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"chatgpt: https://chatgpt.com/share/67513f52-5018-800f-9b2c-a254ecdb93ba","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"