4 ms·
Prompt: code up an analog clock in html/js/css. make sure the clock is ticking exactly on the second change. second hand red. other hands black. all 12 hours ma
by msoad 2y ago
Prompt: code up an analog clock in html/js/css. make sure the clock is ticking exactly on the second change. second hand red. other hands black. all 12 hours marked with numbers.
ChatGPT-4 Results: https://jsbin.com/giyurulajo/edit?html,css,js,output https://jsbin.com/giyurulajo/edit?html,css,js,output
GPT2-Chatbot Results: https://jsbin.com/dacenalala/2/edit?html,css,js,output https://jsbin.com/dacenalala/2/edit?html,css,js,output
Claude3 Opus Results: https://jsbin.com/yifarinobo/edit?html,css,js,output https://jsbin.com/yifarinobo/edit?html,css,js,output
None is correct. Styling is off in all, each in a different way. And all made the mistake of not ticking when second actually changes
- sebzim4500 2y agoTo be fair, this is pretty hard. Imagine you had to do to sit down and write this without being able to test it.
- msoad 2y agoStyling I understand but to tick the clock when time actually has changed you need to use animation frames APIs and check for clock change more often than "every 1000 ms" because setTimeout will eventually drift even if you start exactly on first second time change. This is a test for depth of knowledge of a programmer I used to use in the past in interviews.
- SeanAnderson 2y agoThis is platform-specific, right? Chromium corrects for drift (https://source.chromium.org/chromium/chromium/src/+/main:third_party/WebKit/Source/platform/Timer.cpp;drc=e6d900fb6ed08dbd3a048899f38962ee75f4d8d0;l=162 https://source.chromium.org/chromium/chromium/src/+/main:thi...)
- msoad 2y agoI wish that was true but you can easily see it drifting in Chrome let lastms function tick() { if (lastms === undefined) lastms = new Date().getMilliseconds() else if (lastms !== new Date().getMilliseconds()) throw new Error('Drifted') } setInterval(tick, 1000)
- deleted 2y ago[deleted]
- realharo 2y agoIt's only drift if the error grows over time. You need to look at the sum of the offsets.
- deleted 2y ago[deleted]
- imtringued 2y agoI always considered subjecting humans to CSS to be a form of torture. Actually, it's worse than you said. Imagine if you had to do this, without knowing what a clock looks like. Here is the fix for the "GPT-2" version: .hand { top: 48.5%; } .hour-hand { left: 20%; } .minute-hand { left: 10%; } .second-hand { left: 5%; }
- staticman2 2y agoWhen I first read this prompt I thought "Okay but what time do you want the clock to be set to?"
- msoad 2y agonaturally the current time
- acchow 2y agoHave you tried this with "chain of thought"?
- atleastoptimal 2y agodamn these bots must have dementia