exported_code/Q55_Build a Pattern Lock Screen component using HTML_/meta_39.json

{
  "question_id": 55,
  "question": "Build a Pattern Lock Screen component using HTML, CSS, and vanilla JavaScript. Create a 3x3 grid of circular nodes arranged inside a square container that remains centered on the page. The nodes are indexed 1 through 9 from left to right, top to bottom. When a user presses down on a node with a mouse or finger, begin recording a pattern entry. As the user drags across the grid, if the pointer enters a node that has not yet been visited, add that node's index to the sequence and activate its visual state. Draw an SVG line connecting all visited nodes in order, and draw an additional trailing line from the last visited node to the current pointer position. If the user drags over an already visited node, ignore it and do not add it to the sequence again. The connecting lines must render beneath the nodes using an absolutely positioned SVG layer. When the user releases the pointer, stop recording and compare the captured sequence to the hardcoded correct pattern of 1, 2, 3, 6, 9. If the sequences match exactly, display the text Access Granted below the grid in green. If they do not match, display Access Denied in red, change the color of all active nodes and connecting lines to red for one second, then automatically clear the pattern. Include a Reset button that immediately clears any active pattern, removes all lines, and hides the result message. The component must support both mouse and touch events, prevent default touch scrolling during interaction, and be fully responsive so the grid scales down on smaller viewports while maintaining its square aspect ratio.",
  "q_model": "moonshotai/Kimi-K2.6",
  "has_q_thinking": true,
  "q_generation_time_s": 201.9731748040067,
  "solution_id": 39,
  "stack": "HTML/CSS/JS",
  "s_model": "zai-org/GLM-5.2",
  "has_s_thinking": true,
  "finish_reason": "stop",
  "chunk_count": 7760,
  "s_generation_time_s": 410.1672837299993,
  "q_created": "2026-06-27 08:24:52",
  "s_created": "2026-06-27 13:40:55"
}