 Let's see now. I think we should be live getting to be live on YouTube Yeah, thank you for the heads up by the way Who was that was at Sea Grover? Yeah, yeah, yeah, you have to go That's that's my mistake. You have to go click a go live button inside YouTube And I totally forgot to do it Twitch does not have another you don't have to do anything more manually, but YouTube you have to hit the you have to click the button so Unfortunately, we didn't get live onto YouTube until right now. So hello folks from YouTube. I will do a very very brief intro I did already do the intro. I don't know. I guess this probably won't be included in the video on YouTube I think that the VODs play on Twitch so you could look back to there if you're interested But I'll also try to make it super quick and just do an introduction So for the folks that are just joining us over on YouTube Sorry, the stream started a few minutes ago, but I didn't didn't get it live until just now So thanks for tuning in. My name is Tim. I go by foamy guy on github and discord. This is deep dive program We're working with circuit python Related stuff in particular. I am using this Raspberry Pi Pico W And we're gonna be making a trivia game that shows questions on the display and lets users answer with these buttons here And then let me just quickly say since we have new folks coming in from YouTube Thank you, of course to Adafruit the hardware and software company based out of New York Adafruit is the company that Sponsors circuit python. They are the ones paying the folks who work on the project full-time other folks like me who work on the project part-time So they are paying us to write code and make documentation and maintain Libraries and fix things and do support and stream So thank you to them and thank you to everybody who purchases hardware from them because of course that helps support the project Okay, I won't go into any more depth than that again if you are super interested in the parts You missed if you did just join us on YouTube. I think you can maybe catch the VOD on Twitch after the fact I suspect that beginning part will be cut off of the YouTube VOD But I think the twitch one if those get saved on there And then I think you could watch it on there potentially, but I mostly said a slightly more expanded version of all the stuff I just went through so We should be caught up so getting into the the thing we want to work on which is this trivia game Oh, and then the one other thing that I had started talking about was for folks that saw last week's show On Friday last week during the deep dive. We were working on a trivia game that was based on a web server It ran on a web server inside the microcontroller We loaded up the page in the browser and then we were gonna play trivia from that page We ran into a bug where our page was too big. It wasn't getting returned anymore And so hug reports this week to Dan H and Jeff Jeff Confirmed the issue and put in a fix for it that PR has already been merged and then Dan has already released a new version With this fix and some other stuff in it as well So the new newest beta release is already out and that fixes the issue That we ran across last week where we were returning a page that was too large So that should work now and at some point we will get back around to that one But today what I'm gonna work on is this more sort of physical one instead of being the web server and we play it from a PC We're just gonna play it right on the screen here. We got our four buttons to match up with our four answers And that's how it'll work It will tell the user if they're correct or not it will keep track of score It'll let them just go through all the questions answering them one at a time so We've got this already wired up. Let me get it plugged in. This is a Raspberry Pi Pico W Which has only somewhat recently gained support for Circuit Python well well specifically for support of actually using the web connection in circuit Python And so we I'm building this project just as an example of something you can make with this device as well as to try to test out The functionality and push the limits and figure out anything that needs fixed up. And so we started to find that last week And it's already fixed so thanks again to Dan and and Jeff so this one is the Okay, this is actually just the test size Size I was just using this in fact I this was the more self-contained version of the code that illustrates the issue which has now been fixed But I think it's the same code as this so I don't think we really need I guess I'll do that just in case it's new. How's it going Axel Axel Magnus Paul SK and Keith? Yeah, thanks again for the heads up see grubber All right, let me clear that out and We're just gonna jump straight in so the first part of this so first of all I want multiple pages I want one page within my Within my GUI and when I say page I just mean like you know a series of things on this on the display I want one page that's gonna be allowing the user to select the number of questions They want in each round and then I wanted well the number of questions as well as eventually the category I think would be nice the API we're using allows us to choose both of those things I'd like to eventually have one page where the user chooses those Once they're ready, they click start and then the actual trivia game begins And it will change over to a different page when it does that so the actual questions And all that stuff will be contained in their own page and the setup with the number of questions In categories will be on its own page And then code pie will be able to switch back and forth nice and easily the way I'm gonna code that is using the paged layout display I owe layout layout Paged layout which is in here We are gonna use this To make our multiple pages so first though we need some setup stuff. We can import board We can import display. I owe We can go display equals board display We can go while true Pass we can go Main group equals a new group And then we want one group for each of our two pages so we can go set up group equals display I owe group we can go game group equals display I owe Group okay three groups We're gonna want some labels and stuff as well eventually But well, let's yeah, let's let's make one label for now We need to install this for one thing. So let's do that I like installing stuff with circa. I don't know if that's gonna copyright. Let's get Any of these examples have labels in them. I'm gonna go bitmap label though I'm gonna go So I'm gonna go cat it no count count question count label equals bitmap label label Yeah, I don't remember so font and then They've text Then quarks, I think we want font is gonna be Terminal I owe font save text we can leave alone text equals Questions colon and then we'll start it on just saying 10 Is that's the default We're gonna need to import terminal. I owe for sure. Let's do that So we have a label. It's got some text in it Let's go question count label anchor 0.00 and anchored position Let's go like 5 5 we can put this in our setup group These are not functions. These are actually properties Which is why that's yellow I'm not using JavaScript. Let's take that out Set up group dot append. So that should be good to start with I'm just gonna go I'm gonna go just main group append setup group and then oops Display dot show main group not seem like it worked Module object has no oh right, of course Know what I'm thinking. There's no board display, of course because our display is external Display oh We're gonna want honestly, we're gonna want all this stuff. Yeah our guy. How's it going? graph, excuse me Might be by towards the end of the stream nice So this is all the setup for our display Think we're gonna not do rotation. I actually rotated 90. I think I think we want the screen in landscape mode ultimately Okay. Yeah, I guess we do want 90 because it is The portrait in fact it's portrait upside down right now What's 60 is what you want? There we go. That's how we want it. I Know it's sideways here. Maybe turn it like this for now Then the the lights a bit much, huh? Questions 10 let's get the questions working first. So let's get it set up to where User can press a button and increment and decrement the questions I think I'll just count by fives instead of ones and Five will be the lowest so the user will be able to choose like maybe Anywhere from five to maybe 30 or something questions. So let's say question question count choices Or even just count choices Is a list of five ten fifteen twenty twenty five thirty So and then let's go Hear out what we're gonna do with colors later For this part of it. I think we want maybe green to count up and They're red or yellow to count down I think we probably are gonna want to make this a state machine also. So let's go state They Set up equals zero state Game equals zero no equals one state Game over equals two. We'll have a page for game over also. We're gonna want Kerr state equals Set up is we're gonna want to be able to know what state we're in that way We know how to react to the buttons because we'll react differently to the buttons in different states So to start with we want to turn on LED one on our one by four to be Let's say green and then LED two to be red Neo key. I think is it pixels. I don't remember. Does it just say? Pixels I equals color. Yeah, okay, so we'll go Pixels zero equals green pixels one What do we think red or yellow for counting down? Let's do yellow Red feels like turning off and we're not really turning it off. That's not yellow. Is it though? So we got these two on now We want to know when they get pressed. I'm just gonna copy all of this even though we don't want to use some of it Not doing color palette Think we need any logic here, but I'm just gonna put a pass and keep it for now in case we come by some later So we're looping over We're looping over the colors. We don't actually really care about the colors. Do we any pressed? Oh If okay, so Neo key I Yeah, I don't know we don't really need a for loop for this doesn't feel It doesn't feel right really to have a for loop. So I think we just go if Neo key Zero And we probably want some debouncing on this right Probably gonna want some debouncing. So let's go old button states Is a list of Are they far is it true? I think it's true false. I guess false Or zero would do the same I suppose are gonna be false and then we're gonna go if Neo key zero and not old button states Zero so if it is pressed now, but it was not pressed Last frame Actually, you know what we can do is let's go Do we be creating a new list each time? Maybe not? Okay, yeah, let's try it. Let's try it this way straight this way But if if it's currently pressed and it was not pressed in the previous frame that means we just pressed it down if it is current state Equals setup if we're currently in the setup state then we want to Use this to increment the count. So we want to go Well, one thing is we want to have count choice index and One is the one that it's on currently and to prep for what we're about to do We can also make this an F string and then we could go count Count choice index Then we're gonna be setting this again afterwards Question count label that text. So we want to go count choice index plus equals one but We also need to limit it. So Should we use max or min count choice index? Plus one plus five at no no no index plus one. Yeah index plus one so the minimum of that and the length minus one Everyone is smaller That's what we want to go to count choice index, then we refresh the label But that should make it count up by five each time. Oh It went very fast. Oh We did not update our debouncer. We made debouncer logic, but we did not set the state the old state so in here we actually need to say Whether yeah, I don't think we care about the state machine, but we need to go old button states zero equals True Actually else, I don't know that we want else right because it depends if really what we want is Guess really what we want is this so if that's true, then it's gonna get set to true here and if Whether or not this comes out false, we will still always update old button states to what key zero is now I think that fixes the debouncing Yeah, I held it down and we only went up by five If I was using seesaw bulk read How does that work? Is it in the neo-key library? Well, I'm about to add the second button now but if it is You know, I don't anticipate them switching or pressing particularly fast. So if it's Really a performance thing it may not matter too much Yeah, it looks like it doesn't have well, it's it's subclass of seesaw So I guess if that's the thing that's on seesaw We could do it. I don't know. I'm not super familiar with the with the seesaw API So we have to look into that to do it that way. Oh I will have for John this way for now See if it's once we get our four buttons in if it's Having trouble keeping up or anything then we'll I Go back and look at the Saw library, so this one's gonna be actually max zero Each seesaw takes eight milliseconds. Oh the read takes eight milliseconds. Okay Okay, and I could do one read in the same eight milliseconds. I guess then so it would go from taking 32 milliseconds to read all four buttons down to just eight. Oh, let's we get there One so this one. Oh, this needs to be one down by one max but Max at zero. So if this goes negative we stay at zero Update the label update the old button state So this should let us count down now Okay I'm gonna start with just that ultimately. I want to have category on this page also But I think I'm gonna start without category and then add that later Because we kind of have a proof of concept here in order to make the category work I got to go get a dictionary of all the choices Which I think we saved somewhere maybe when I was working on this one, but let's take it one Let's do one step at a time Let's hit our thing get our with our count first and then start doing our game as well I don't want to spend like necessarily all stream doing the setup and then not really get to the game So we can we can do select categories after So One thing is we need a we need a start playing button as well. So I'm gonna use key or as Start playing and I'm gonna make it Pink or blue. How we go Yeah, maybe once we make it if we make it like somehow multiplayer or something if they're like buzzers and then it's like It really matters who plus pressed first in that kind of scenario. Maybe we definitely do in that case For a single player, I think the eight milliseconds won't give us too much trouble though. So let's grab Key three we're not doing that not doing that we are starting the game Which means Let's go start game as a function. Okay, so it's gonna need to switch to the game page Which we could Technically just manage ourselves with the groups. We could just set the groups to hidden I'm gonna use the page layout though because It makes it a lot Nicer How's it going Johnny? I definitely do not remember this API just X and Y interesting. Okay, zero zero go add content Setup group Setup game Game group game now Instead of Putting this in here. We would go page layout to our main group And I think that should let us be seeing page zero first. So let's see if that actually works. I did And then when we call start game, let's go Page layout Show page page name Game and we don't actually have anything in our game layout yet, but if our If this label disappears, then we'll know that it worked Nice well, I guess we don't know that it worked, but It probably works. We have evidence that it worked You can find new evidence later that makes us think it didn't but we have some that points towards it doing it And so this is nice because now when we want to switch we can just say like show page tell it the page and we don't have To worry about what's hidden. What's not hidden. Which one are we gonna switch to? We don't have to add and remove the groups. Nothing like that. We just set it up. Tell it which one we want to do We're good to go And so start game. Let's go ahead and add something to our game layout. Let's say a Question label Equals another one of these Starting text though is just gonna be Question loading. I'm gonna rename this instead of question count label. I'm gonna call this set up Set up count label because we're gonna have a count label inside the game page also Which is gonna show the current question that we're on but now we can go Game group append Question label So now when we start game we should see our question loading There we go and then at this point we want to Fetch the questions so let's go in here and say fetch Questions then make this stuff fetch Questions Then let's go to We could see all I trivia review URL hmm I guess we need to do it in here though, right? We need to do it after Maybe we should just have base and then append it together later I'm gonna keep a copy of this with both on there, but then I'm gonna take it and get rid of All that and then inside start game here. We're gonna go Review URL equals F string itself Question mark is already there. So then we're also gonna go Query Query equals this Why is this mad? Resolved reference. Oh, we can't do this. Can we because it's in the global scope Um, yeah This is probably not the correct answer, but It's what we're doing for now Maybe maybe we'll make one object that is a dictionary that stores the URL the current score the current question number Anything else that we want to store about the game like a game data object That gets us out of using global I think right because I'm pretty sure a global You can set a key on a global dictionary. You just can't change a global a global Tring or something so let's say game data is a dictionary It's gonna start with Tria URL. I was going Dexter Save that or else. So now we could access it and and I think we can change it more more importantly than accessing it Still equals itself plus the query the query is gonna be amount equals The amount they chose which is Count choices count choice index Start game that will update the URL fetch questions gets called inside here We Make the request we should do this stuff at the beginning. I think Be after we set up the display guests ssl Okay, all of that is set up. So now we should be able to go Make our actual request Like this We're gonna go game data questions rules this At this time, we are also gonna go game data Kerr Index will zero score Equals zero. So this is basically gonna reset our stuff actually to be honest with you though This would make more sense inside here, truthfully These ones resetting This one though needs to be here because we need to get our response first There's our questions and then I think then we can just go like show Kerr question def Go her Question so to do that we are gonna go question label that text equals game data questions game data Kerr index and we don't have the We don't have anything else yet. We don't have the count yet. We don't have the answers yet But let's see if we get this much working and I guess at the end of this We would want to go an increment this Well, no really that this one increments whenever they press a button. Yeah, which we don't have the button set up yet We'll have the states here if the current state is game State game then we'll have the logic there. So let's see if we show the first question correctly Let's see if we get our fetch show our first question I guess if we printed it out, we could even see if our amount is working I don't think I did print it though Question loading Crash no attribute find something Attribute find dictionary has no attribute find 19 In beta questions it occur index Expected type string. I didn't expect it to be a string score Okay Sting I mean it's gonna still fail the same way though, right? tabs tabs Actually going into here replace tabs Mary has no attribute find oh These are objects. These are objects. We need to go. We need to go Probably question. I don't actually know we should be printing this. Let's go print game data questions Or just a json gives us back Why does this think we're in the ripple already, but we're not actually right? We're in the code But it did not why didn't it not print again? Well, this is like stuck. I don't have any control over this anymore control C and control D aren't doing anything Ha that one works. It says what is the color of something now? One problem is it's cut off on the edge there We'll need to wrap it. I want to figure this out though because kind of nice to Be able to Actually use this Okay, so we want to make sure that our question is gonna wrap We also want to have actually def HTML decode because the questions have The questions have HTML entities escaped into them. We'll just keep adding more replaces as we find More things that exist So we should also go HTML decode But then we should also go Display text rap. Does that work rap text? I think how do we import it? Do we want pixels rap text to pixels from display text import? but then we also Where did we set the question here? We also want to go now rap text to pixels Which takes the text? rap width and the font Text rap width font and then rap width is actually going to be display With minus Ten because I want five pixels adding on each side This has no attribute find right because rap text to pixels returns a list So what we need to do is new line join That list back together There we are. What alcoholic drink is made from molasses? Um, I don't know rum is sugar. I didn't know there was one. Let's see Rum get that Starting on a good start on a high note. We got the first one Okay, so let's add more to this. Let's show the question number and Then after that we need to show the answers Question number. I'm gonna add a new label to the game group Question actually I'm gonna say game game count label and we can just Let's just start it on empty doesn't actually matter and actually I want this one at 5 5 and I want this one lower. I want this one maybe like 15 5 so we have enough room for the first row above it and then when we show the question We want to go game count label dot text equals f string Slash game data index plus one over the total number of questions, which is Count choices on choice index Why is the rem always gone? Let's see Okay, so that should put I think like one over ten in the top left when we show the question I need a bigger screen. That's gonna be tricky. That's a lot. That's a lot to fit Okay, a couple things here. Let's go. I guess let's back this all the way off to 1x And then this can be displayed with minus two that will give us slightly more width with which we can put the question in Let's also go question label Line spacing 1.0. I think it defaults to 1.25 I did notice we don't have oh We didn't add it to the group. We didn't get our number, but that makes sense. We actually need to go game group and Game count label Can you touch screen scroll this one? To the best of my knowledge, this is not a touch screen. So I don't believe so Although I mean we have the buttons, right like we could I suppose make it to where I Don't know that gets tricky though because if two buttons are scrolling then I mean even if one button scrolled and it always scrolled down, but then it just bounced back to the top Maybe do that, but the problem is that All four buttons are meant for answering So then we'd have to have like another button that says like I'm ready to actually answer But I mean one thing is though we do still have a boatload of pins on this. Maybe we just add Maybe we add another one or two buttons Aside from our four pack here That may be that may be where we end up going auto scroll Auto scroll We have a scrolling label I made it for the win amp project, but I Don't think it supports scrolling vertically and I also am not necessarily sure that it supports More than one line. I think it scrolls horizontally and I think it will I'm pretty sure it scrolls only one line So maybe the time has come to make a vertically scrolling label that Uses like rap to text like we did and then Slowly just iterates and moves each row up Over time We might have to do that auto scroll seems kind of nice Although it's it's weird too because if you start reading the question and then the beginning scrolls off That's kind of frustrating You haven't read it, but I don't know. What do we do? Yeah, maybe it's like maybe it waits an extra second or something I don't know we'll think about it We could always we can't always add a couple extra buttons as well If I if I needed to add one or two more buttons, I got room on the breadboard and of course we could Find a room in the project box whatever it is do the breadboard neo keys have mounting holes What do you know? Neo key just the one buys these ones they don't do they But that would be tough to mount. Oh, I guess these are our mount holes Are they be tough to mount in a box though other little ride-along PCB or something? I don't know We'll see see where we end up. So I think the Changing the line spacing should help Also, we can give we can move this up Let's move this up. Let's use all the vertical space we can so let's actually say This one can stay at 5 5 that one doesn't matter question label though, let's go count label at 1 and then let's go question label Yeah, that's pretty good. So that was That was 10 higher. So let's bring it back to 11 only fetch shorter questions. I don't know that we have Mean we could fetch all Questions and then just ignore Long ones, but then our count could be off right like if we fetch 10 questions, but two of them are too long then the user is like hey, where'd my Other 10 question other two questions go We can't filter in the API by size We might be all right now though with the spacing because like at this point we still have room for And we could easily I think still fit another two to three lines under this and and still have room for the answers Hopefully as long as the answers aren't too long if there's wordy answers then it then it could be Might be too long, but I think the answers tend to be like One word more so then Yeah, I think let's let's give it a try like this. We'll see if we run into another one. That's too long so we have the Count we have the question. Let's put the category put the category up with the count. So let's go Category Category label game in category label equals game group and In category label and let's just make this let's make it right aligned that way It'll always be as far away from the numbers as it can be So this one's anchor point is actually gonna be 1.0 for x and Anchor position will still be one, but then it will be display width Minus one and we didn't actually set it though. Let's set it Show current question category label dot text Okay, so we found a new thing that needs to be escaped LDqo rdqo Those are quotes and they're Different characters for the left quote and the right quote, which is how things should be my opinion Luckily nobody asked me rdq. You oh Rdq you oh and then it was I guess was it LD Q you oh really get like the perfect Engel here, can we? So yeah, we're just gonna replace both of those with regular old quotes I think though it did not show our category did a category label. I guess Maybe I maybe I got the Category hmm. I don't know Yeah, I would agree I don't understand why there needs to be two quotes Especially not from the same service right because like the fact that I had This one the plain quote in there already means that a question Came back to me with this one in it. So that means that there's actually inside this one database. There's three different escape sequences For three different kinds of quotes Hopefully there's not single quotes, too But where's our category? Geography you not added to the Does this get messed up by not having text yet? I thought it Good work. Oh, this should be one This should be displayed with Minus one We want one down and then all the way to the right minus one pixel Maybe do we want minus two pixels? I don't actually know It's that it's zero indexed. I think right. So we really would want minus two pixels so that we have one pixel of padding Yeah, maybe it doesn't matter. It looks pretty good Driver has been the formula one world champion for a record seven times Axl that one's yours. You got this one. Uh, let's go Uh questions Maybe I'm misremembering. I want to say it was axl that's watching races sometimes when we stream Maybe I'm wrong though. If so, I apologize Uh, let's add the answers answers. So let's go Uh game count label. So we're gonna go category label So we want basically four answer labels. Uh, we should be able to put this back. Actually, we shouldn't need these You shouldn't have to be down here. I'm pretty sure these can be back up here where they were Let's make sure it works You know, the other thing we can do for the font uh for the size. Oh Oh, it's too long boot Entertainment musicals and theaters Let's just truncate it for now That would be a place Where we could use the horizontally scrolling label that we do have already though But I also don't necessarily want to set it up just yet Yeah, I don't think I want to set it up just yet But it should be pretty easy to slot right in there. We could have this one be the horizontally scrolling one We can tell it how many Characters it's allowed to have and then that way it'll always leave room for the uh number and then if it's long enough Then it will just scroll All right, so let's go answer one label so Answer one is going to be left aligned it's going to be at one And it's going to be at actually bottom aligned uh display height minus so Before we mess with the location or Anything else before we do really anything else or worry about the other answers. Let's just try to get that one showing Uh, so then let's come into here and go answer One label text equals. Let's just set it to the first incorrect answer Uh, eventually we'll randomize this so each Answer label has an equal chance of being the correct one or not. Have you a good time to use grid layout? um Possibly I don't know that I'm gonna have enough cells to want to use grid layout it would It could work Arguably the code will get a little bit cleaner Not a hundred percent sure on that, but it may Um, I think I'm gonna well. Oh for the questions though. Actually. Yeah for the questions The questions actually really would be good for grid layout, wouldn't they? Yeah Because I do want to I do want a two by two grid All right, let's do this one Let's uh get it to show its answer first and then we'll go back and make a uh, we will make a grid layout At least for the answers. I don't think I want to do the question and the count and the category I don't think I want the entire page to be one grid, but we can do a two by two grid for the answers And that'll be nice So let's have it show one of the answers Oh, I was gonna have it truncate the category also Like um, I'm just gonna smash a bunch after that. Um Didn't one of those slice the front off? Is that different than cpython? I supported Codepy, why is it running codepy the ipython run codepy automatically? Do I guess different maybe Am I completely imagining slices? Does that not work? Okay, I made it a list and not a string. Yeah, thank you Uh So let's just show the first, um, I don't know how many Characters we'll have let's start with 16 see where that gets us Yeah, I was like, I know I have used this before you cannot tell me this doesn't exist Okay Uh, start that up in the wrong spot our category is in the wrong spot now Was I wrong about moving the anchor point back? Maybe I was wrong about moving the anchor point back I see But I and then you we can we can we can move this back. I think as long as we don't overwrite The other one There we go. Okay question one to ten categories geography. How many countries are larger than Australia? Is the answer four Hint probably not because it was in the incorrect answers list Okay, so now let's do make a grid layout And our other answers. So let's go answer grid equals grid layout which we will get from Yes, we can go Well, how did I make the page layout that I just okay, it's imported also So let's do grid layout from here But that let's figure out what the constructor is. Oh, wow. That's a lot of stuff x y width height Grid size cell padding divider lines Okay, well x y we're not going to mess with because we're going to set it by anchor point We can Can we I don't actually know if we can I think we can Okay, it extends group actually maybe we can't We have cell anchor points But the layout itself the table the grid layout does not Okay, so we will need to use x y x equals 1 y equals display height minus 20 22 We tried 22 cell padding No, no cell padding grid size grid size two by two and then let's go answer grid and then let's go answer grid dot add content answer one label grid position zero zero cell size is 1 1 which should be the default I think Hey unfilled with unfilled. Yeah, I guess we'll do that. So 22 height width equals display dot width minus 2 parameter cell size unfilled Is there not a default? What was the first one of these? the grid position Was the capital of the american state of arizona I guess is our phoenix or scotsdale, but I don't know That's actually right or not I don't have really a guess between the two of them I guess phoenix feels more important, but I Think arizona might be one of those states where the capital is not The city that first comes to mind Some states like that where it's like capital is just something weird Okay, so we got our grid. We should be able to make our new labels now too. So let's make answer two in three and four Maybe should have done zero one and two three We don't need any of this actually we don't In fact, we don't want any of this We'll do basically this for each one of them So that'll be one zero Three that'll be Zero one and that'll be one one and then just to make sure everything is working. What I'm gonna do is Just go zero one two And then this one will be correct And eventually we are gonna randomize those but for now, we'll just put the correct answer inside four that way we can See if everything is fitting on the display or not so Grid's not bad, but Answers are too big So what do we want to do here? Do we want so like we could Potentially get a smaller font Pretty small already though Is there a bigger display breakout? There's feather wings 3.5 inch one 22 inch one these ones have touch. Well, actually I don't know how big Is this one? This is the st 77 35 r 1.8 inches Maybe we bump up to one of these So this is the one we have. It's 1.8 inches You gain an additional inch diagonal plus Almost double the pixels or we could even gain a little bit more One and a half inches diagonal, but same increase in pixels Or even bigger up to 3.5 and that one's actually more Again 480 by 320 Okay, so that's obviously not like a short term solution because I can't uh I wouldn't get it very fast forward it and I don't think I have any of those I do have the feather wings. I guess theoretically we could rig it up with the feather wing I'm sure I want to do that ultimately though. I think for the final project one of these would probably be best because It comes without pins and I'm thinking that this project might be uh just like a Static solder job like just solder the wires straight from this to the microcontroller Maybe that's dangerous though. Maybe we should still use headers Okay, well, I'll think about a bigger screen for now we will fredge along and We want to try to put in I mean, I guess we could do scrolling labels for answers Also, that's gonna get a little crazy if you have that much stuff scrolling Let's see what it does. I mean, it's functional at least I guess I mean like in this case theoretically we could I mean in this case we could go like the four answers on four different rows We could have a question that's longer next time and then it may not work But if we make the question scroll then we could always make sure that there's room For the four answers on their own lines Let's try We can us a bit. Let's say Fair grid So let's go double up to 40 Four and then 44 here and then the grid size One by four And then we go zero zero zero one zero two zero three That gives us four answers on four different lines And we still have room. There's probably room for another three at least lines of text in here So if we did have the vertical scrolling working We could have it be five lines tall and Who would still fit? This will give us room for longer Answers So How does scrolling label work? Also, actually before I dive into that I apologize, but I've got to run to the restroom really fast I should have gone before I started and I didn't I apologize, but I'll try to make it quick brb Okay Gonna take some work to fit on the feather. Well, yeah, it won't fit it will uh, it'll it'll need wires, but Because it does I don't I mean unless there's like a pico to feather adapter, I suppose, but um, I don't know of that existing So it won't it won't just fit directly Like we could run the wires across and Would kind of work um So do I want to what do I want to do do I want to work on the vertical scrolling label now? Or do I want to just keep going on with The Trivia I think let's keep going on with the trivia. Let's get it to where we can press an answer And have it be counted Uh as correct or not and then also advance to the next question I always feel like someone will take over the stream Should get like uh, we need like a they have like idle games and stuff. Maybe we need something like that Maybe I could leave like a chat controls pong Running on the pipe portal or something you guys can play through it play with it through the chat or something I don't know how that would work, but You use feather proto Why are the feather tft? Oh, that's a good idea. Yeah feather A full-on proto grid the mvp going okay Uh, so let's go So for one thing is I do want the lights to be a slightly different color We did these colors before When we start the game Uh, well for one thing actually we need to go to the game state Oh, I can't set this from in here. Can I Why does scope have to be okay? I guess we put this on here with the right syntax I mean, I guess I could change it down here, but So we're gonna set that to state game We are gonna use these here When we go to state game We want to also set the pixel colors and Or I'm just gonna for now. I'm gonna stick with the same colors. I have but add in blue There we go so now In our click listeners for the buttons Let's go ahead and add a key two because we're gonna be wanting that So we're not changing states when key two gets pressed I mean, basically we don't care about state setup honestly, so we're just gonna say state game Then we'll have some logic here Because the key two Key with index two will not be used during setup So then for these we'll go elif Game let's randomize the questions I guess, um Oops They're actually gonna be in here because we actually only want to do this if it is a multiple choice question Don't need that choices random All this html decode I don't really know that we need to print it truthfully though So what we'll end up with is a list of the possible all four possible answers And they'll be in a random order the correct one will be in a random location within that list So then We can basically just set Each one of these to Ruffled choices but We do also want to html decode and We also want to go game data correct answer equals Decode the correct answer. So we store the correct answer in here, which we're going to use later on to Check if they got it right or not So we can't memorize the choice position or tell someone which choice the answer is good call. Yeah Yep, we gotta we gotta we gotta do it right if we're gonna do it Uh correct answer so shuffled choice. So this should randomize the Should randomize the choices Oh, you know what we need though is we need to actually Keep the shuffled ones also do we need to keep the shuffled ones? Neighbor's starting up the motorcycle. Hopefully this is not gonna come through too loud Trying to start up the motorcycle. I was like it hasn't been started in a minute There it goes Try to point the microphone away a little bit That's too loud. Let me know and I'll just go and mute until it's done Okay, so now on our button press if it's game state we basically want to go if And this is button zero. So we want to go if game data Correct answer is equal to game data Shuffled choices zero Score not that loud. Okay. Luckily I have a directional mic and a noise gate It was quite loud here where I'm at The windows open two which didn't help Score Plus equals one because they got it right Let's just say print correct Else print Incorrect eventually we'll put that on the screen as well. I think somewhere Maybe Well, actually we don't have we're not showing the score currently either. Hmm Yeah, a bigger screen. I think is gonna be super helpful I think we may I may need to be uh placing a screen order. I'll look back through my stuff Make sure I don't have a bigger one I don't think I do Other than the feather wing So we'll just print the we'll just we'll just increment the score for now. We'll worry about printing it out later Um So we I mean, I think we should be able to check each answer now, right? Like we put this one in here The only difference is that's one We put this one in here and it's two We put this one in here and it's three So we did not show the next question So we'll only be able to answer one and it will only just print correct or incorrect We'll see if we get that far. What's the name of the album released in 2014 by the american band marine five? I have no idea Five Seems like a reasonable guess so let's guess option one And it doesn't put anything on the display yet, but hopefully ah look at that nice, correct um So the good the good thing about this is actually I can press a different button now and because we did not increment the question Uh, we can also test incorrect. So let's push button number two Nice. Okay, and three Oh Oh, well that wasn't three though That was two and two is here and two is wrong because this should be two and two messed up our debouncing And what year did the bin bang theory? Uh, oh nine say oh nine Oh seven Nice, okay So let's actually increment um So whether or not they got the answer right Doesn't really matter We want to go current index plus one Yeah um Let's make a function called next question occur index plus one and then we go if Game data occur index greater than Equals to game data questions Length of that Then we're going to go to state game over Curse state equals game over Hedge layout show page Game over which I don't think we actually made a group for Game over group equals display group Game over label Can yeah, we can leave that there line spacing doesn't matter nearly as much But I'll leave it Say game over Eventually we'll put the score on here as well Game over group append Game over label and H layout add content game over group Game over Okay, so if we make it there it should hide our questions and it should show our Label that just says game over Um another thing we could do maybe is game over label eq text equals f string game over label Actually, we could just hard go to it again game over new line game data Score over game data Questions So that should tell you how many you got right Out of 10 or however many you played On the game over label which should get shown once we answer the last question So let's see if that actually works They're gonna maybe gotten down to five try five next time. I guess No knowledge. Oh our answers. Uh, we didn't handle boolean answers But we'll do true Always on the first button false always on the second button and then My assumption would be that some questions have the answer of true and some have the answer of false Actually, we need those though because we want to go blank Blank to clear out the old Clear out the old answers Uh And then we can actually So in this case, we're not gonna actually shuffle. We're just gonna say shuffled choices equals True false Because then when it compares correct answer to Shuffled choices index It'll be matched up correctly Let's go down to five I don't even know if that part works. I don't think we tested it. Oh, it says one of five. Okay Arcade fires the suburbs won the album of the year award in 2011 grammy's true false. Uh, sure. I have no idea We got that correct But Oh, we never called next We never called next We made a function for this next question Show cur question Or should that be in here? Maybe else Show cur question and five start Fencing computers, which of these names was an actual codename for a cancelled microsoft office project microsoft project Uh, I don't know Neptune We'll save we'll save the well, but then we don't know which ones we got, huh? Let's check got a correct. Nice. Correctry What was the transfer of disease crops and people across the atlantic shortly after discovery of the americas? These crops and people Transatlantic save trade columbian exchange triangle trade silk road Transatlantic across the atlantic, you know, I guess one transatlantic save trade That's they brought a lot of stuff over. Nope incorrect. Got it wrong Uh, which ones of these mario kart games was made for the gameboy advance? Well, it's not 64 and it's not super mario kart because that would be 64 and then I assume s and es So it's got to be double dash or super circuit and super circuit Sounds more like a real game to me nice Which of these are not a minute work song. I don't even know what minute work is Uh, dr. Heckel and mr. Jive. Oh, well, maybe that's a real one I was gonna say that's a book, but that's not actually the book How can it be now basket case dr. Heckel mr. Jive? Good johnny be good johnny Don't he be good? Let's do that one correct Which grand theft auto gta, uh, have the same setting for san andreas five vice city four vice city five San Andreas, okay, so really this question boils down to Is gta four San Andreas Or is gta four vice city? And then obviously the opposite one is the opposite one Uh I feel like vice city sounds newer, so i'm gonna say gta five is the same as vice city Incorrect But we did get our two out of five which is not too bad And the score is actually working as is the five questions instead of 10 questions Um, so one thing we could do is let's loop it back around so let's say Uh, we could eventually put this on all the buttons, but for now i'm just gonna put it on the first button We're just gonna say lf game data Per state Equals game over So if we press the first button and we're in the game over state then let's change to setup state and show page Set up But theoretically we should be able to loop all the way back around now We should be able to play a whole nother round afterwards. I think Um Whether or not anything will be broken. I don't know but let's do another five. I'll try to go quick Which of these island countries is located in the caribbean fiji sequels barbados Uh, I think barbados is an island I'm gonna do that We got to get it to show us each one. I got that correct nice Uh in the programming language of python. Okay, we got this one down. I think which of these statements would display the string Hello world correctly Print print f. Is there a print f? Am I crazy or does that say print f and this also says print f? is type multiple Something went wrong We didn't have an echo feel like repeated Like repeated the first two over and over shuffle choices goes back to empty list choices Get set back to incorrect answers You remove the candidate answers when you select one Let's find out so choices starts as incorrect answers It's appended with the correct answer. So at this point choices has Zero one two are incorrect answers and then index three is the correct answer And we go into here. Is it a type multiple if it is we go into here While length of shuffled choices which starts back here at an empty list So that's going to be zero the first time through while that is less than The length of choices which is this which should be four Her choice equals random choice from choices If cur choice is not in shuffled choices Shuffled choices dot append That sure feels like we would need to remove it, huh? Does random choice remove the thing? So we had this Okay, so the problem is we here's the problem is we're html decoding it. We're adding it into here And then we're checking here if it's already in here or not, but It's not going to be in there because we modified it with the html decode So I guess we would actually need this All right, how many times do you fight gillou mesh in final fantasy five? I have no idea. Let's go with five though Five if I made the game In kingdom heart series who provides the english voiceover for master person Um I'm gonna go to jason dovering. I don't really know. I've only heard of like I think two of those Maybe not even in norse mythology. What is the name of the serpent which eats the roots of the ash tree of something Odin odin is literally the only one of those I've heard of before I don't feel like odin is a serpent though I think of odin as a humanoid type god thing But not a snake person I don't actually know though What is the name of the planet that the doctor from the television series doctor who comes from no idea? Uh, which aerosmith album featured walk this way also no idea zero So we should be able to start over with this one Back to here and then theoretically we could even change this so we could go to 10 this time Ah, no, uh Oh got an index out of a range Start game Fetch questions Joker question This index out of range We got back an empty list Those fetch questions which should rerun the git Hmm. I don't know why we got an empty list So I think we ended up with our query twice So the server probably gave us an error for the second one. I'll go real fast through these Right. I'm going to be wrapping it up here pretty soon as well Question five base url How many kilobytes in one gigabyte in decimal? Well, you're with super mario sunshine Which of these cities has degrees I don't think we can draw the degrees sign. Can we I don't think our font has a degree sign We could get a different font with one but Not a hundred percent positive, but I think so. Which of these cities has a four degree East longitude, uh, I don't know Toronto Such computer scientists mark over mars is known for creating which uh game development engine Game maker stencil game maker Sure The survival horror cry of fear. What was the name of simon's close friend? I don't know got one out of five. I think probably the first one But we don't oh, okay. Okay. That makes sense. I guess we we don't show we don't show questions loading The second time, but we probably should we should probably clear the answers And set the text to questions loading dot dot dot like it was initially So inside start game, I guess we should go answer one label text empty three two all those empty and then question label text game count text empty That should make us start over quicker. I think Well, not quicker but show the loading It'll be the same amount of time, but it will show this it should give us this kind of like loading thing here Who wrote the novel moby dick? Herman melville Sargon to the king of the neo-assyrian empire was direct descendant of sargon of akkad I don't know when was the first half-life. Oh, uh The first half-life 97 According to greek mythology atlas was olympian god. I don't know. What was the Mitsubishi? Wakamaru Wakamaru robot Game over three of five. I must have got that one right probably Yeah, oh right, right, right. No. Yeah, that's right question five. Oh, uh category We need to set category blank No degree symbol In terminal. I have fun lots of requests for it Yeah, it would be a good thing to add wouldn't it Is that a uh, is that just a bdf font file or pcf? That's something we could just go and add that or I don't actually know how that thing is stored internally Okay, uh, it did reset. So I think we're good to go here. I don't think we necessarily need to go all the way through another one Um, and I think I'm gonna probably wrap it up there for today. So we got kind of the core Game loop sort of state machine thing going on here. We're able to loop through all of our questions answer them Uh, it doesn't tell us on the screen whether we got them correct or incorrect yet uh We'll try to work that in At some point it shows us at the end like The count that we got correct or not But it'd be nice if like as each one went if it would tell you You know like if you got the previous one correct or incorrect Maybe maybe we could put like a little i or c like up here or something Um, and that will tell you the previous question state. I don't know for sure We'll we'll try to find a way to work it in but it'd be nice for it to tell you If you were correct or not as as you play the game Um, but we got the core bit all working. We're able to choose a number of questions We can make the fetch from the api. We loop through all of our questions um We get the setup state the game state the game over state Changing between all three of them is working all of our buttons are doing what we want. So Uh, we pretty much got this the the the most basic version of this setup how I was imagining um So i'm pretty happy with what we got I think uh, I will be back tomorrow For those that don't know I stream on saturday mornings also saturday morning at 10 a.m. Central time Each week I stream at that time 10 a.m. Central Yep, take it easy. Ask patrick have a good night. Uh, paul as well. Uh, good night and have a nice weekend um 10 a.m. Central time tomorrow i'll be back and I think i'll work on this a bit more like maybe the categories on the setup page and maybe the incorrect versus correct Um, if i'm feeling adventurous, maybe we'll try the feather wing or something I don't know. We'll see maybe we'll do the scrolling text for the small screen I'll see what we get up to but that'll be tomorrow 10 a.m. Central Um, that's on my own channel. I'll drop the links for it in the same chat before I get started Uh, otherwise, thank you to everybody for watching. Uh, thanks to dexter c grover as patrick everybody who hung out in the chat um paul sk Uh, who else we have mike p today? Um, axel uh, davodessa Johnny beata. Thank you to all of you folks near doc Uh, especially keith, uh anybody who helped out like c grover I think you pointed me in the right direction a couple of times and gave some good suggestions and stuff Also, again, I will say thanks again for the heads up about the stream not being started I will apologize once again to anybody who joined us on youtube. Uh, that we were a few minutes late there Um, but yeah, everybody. I hope everybody has a good night and a good weekend I'll see you tomorrow if you catch that stream. Otherwise, I will see you next week for the next deep dive