title
React / Typescript Tutorial - Build a Quiz App

description
Learn how to use React and TypeScript to create a quiz app project. You will also learn how to use Styled-Components with React. 🔗 What you will make: https://tender-mcnulty-a4a646.netlify.app/ 💻 Code: https://github.com/weibenfalk/react-quiz 🎥 Course from Thomas Weibenfalk. Check out his YouTube channel: https://www.youtube.com/user/Weibenfalk 🔗 Thomas's website: https://www.weibenfalk.com/ -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'React / Typescript Tutorial - Build a Quiz App', 'heatmap': [{'end': 192.041, 'start': 139.846, 'weight': 0.72}, {'end': 1920.45, 'start': 1862.05, 'weight': 0.835}, {'end': 2118.134, 'start': 2064.388, 'weight': 0.71}, {'end': 2353.315, 'start': 2249.453, 'weight': 0.947}, {'end': 2928.833, 'start': 2873.779, 'weight': 0.925}, {'end': 3168.731, 'start': 3118.436, 'weight': 0.784}, {'end': 3750.889, 'start': 3688.075, 'weight': 1}, {'end': 4043.034, 'start': 3982.789, 'weight': 0.779}], 'summary': 'This tutorial covers building a quiz app with react and typescript, setting up fonts, images, and quiz game functionality using open trivia api, creating react trivia app components, using typescript for functional components, covering react fundamentals, typescript usage for async fetch, es6 object manipulation, building a react quiz game, and styling react components with typescript.', 'chapters': [{'end': 242.108, 'segs': [{'end': 63.039, 'src': 'embed', 'start': 21.309, 'weight': 0, 'content': [{'end': 26.43, 'text': 'So we can start and we get some questions here and we have four different choices to choose from.', 'start': 21.309, 'duration': 5.121}, {'end': 32.232, 'text': 'So if we press here, you can see that it showed me that I answered incorrectly and it also showed me the correct answer.', 'start': 26.77, 'duration': 5.462}, {'end': 34.773, 'text': 'And then we can move on through the questions here.', 'start': 32.311, 'duration': 2.462}, {'end': 37.674, 'text': 'And this is all built with React and TypeScript.', 'start': 35.113, 'duration': 2.561}, {'end': 40.514, 'text': "So that's what I'm going to show you in this tutorial.", 'start': 38.134, 'duration': 2.38}, {'end': 42.675, 'text': 'So this is the finished application.', 'start': 40.534, 'duration': 2.141}, {'end': 46.256, 'text': "All right, so let's get started.", 'start': 44.555, 'duration': 1.701}, {'end': 55.474, 'text': "going to bootstrap our application with create react app and we're going to set it to use typescript.", 'start': 50.151, 'duration': 5.323}, {'end': 60.558, 'text': 'so if we check the site here create dash react dash app, dot dev we can see that they have.', 'start': 55.474, 'duration': 5.084}, {'end': 63.039, 'text': 'they have an option for adding typescript.', 'start': 60.558, 'duration': 2.481}], 'summary': 'Tutorial showcases a react and typescript quiz app with incorrect answer display and create-react-app setup', 'duration': 41.73, 'max_score': 21.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG021309.jpg'}, {'end': 192.041, 'src': 'heatmap', 'start': 113.818, 'weight': 3, 'content': [{'end': 115.721, 'text': "We're going to clean up our project a little bit.", 'start': 113.818, 'duration': 1.903}, {'end': 123.679, 'text': 'as you can see if we look in the folder here,', 'start': 121.718, 'duration': 1.961}, {'end': 129.762, 'text': "we have some files here and inside src folder we can actually remove some stuff that we're not going to need.", 'start': 123.679, 'duration': 6.083}, {'end': 139.846, 'text': 'setup tests, service worker, the logo, the index.css, the app.test.tsx and the app.css.', 'start': 129.762, 'duration': 10.084}, {'end': 145.633, 'text': "remove those files like that and then we're going to do some refactoring here.", 'start': 139.846, 'duration': 5.787}, {'end': 152.135, 'text': 'in the index.tsx file we can remove this one where we in, where we import the css file,', 'start': 145.633, 'duration': 6.502}, {'end': 159.398, 'text': 'we can remove this one to import a service worker and also remove it down below here, and this should be it.', 'start': 152.135, 'duration': 7.263}, {'end': 175.011, 'text': "save the file and then in the app.tsx file we remove the css import and the logo and for now we're just going to say quiz inside of here and do some auto formatting and save it.", 'start': 159.398, 'duration': 15.613}, {'end': 178.053, 'text': "then we're going to use style components to style this one.", 'start': 175.011, 'duration': 3.042}, {'end': 180.634, 'text': "i'm going to style it at the end of the tutorial.", 'start': 178.053, 'duration': 2.581}, {'end': 182.775, 'text': "so we're just going to build the functionality first.", 'start': 180.634, 'duration': 2.141}, {'end': 192.041, 'text': 'but we can install the dependency for the style components and we can install it by typing mpmi style dash components and as this is in typescript,', 'start': 182.775, 'duration': 9.266}], 'summary': 'Cleaning up project by removing unnecessary files and refactoring code, including removing imports and dependencies.', 'duration': 61.193, 'max_score': 113.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0113818.jpg'}, {'end': 242.108, 'src': 'embed', 'start': 194.182, 'weight': 5, 'content': [{'end': 206.14, 'text': 'we also have to install the types for this one and we can grab those ones from at types forward, slash styled dash components like that.', 'start': 194.182, 'duration': 11.958}, {'end': 213.142, 'text': 'so we first install the style components library itself and then we install the types for the style components and we do it in one go.', 'start': 206.14, 'duration': 7.002}, {'end': 216.423, 'text': 'so press enter, all right.', 'start': 213.142, 'duration': 3.281}, {'end': 218.824, 'text': 'then we can just start this up to see that it works.', 'start': 216.423, 'duration': 2.401}, {'end': 229.561, 'text': "npm start and we can go to localhost port 3000 and you can see that it says quiz here, and that's great.", 'start': 218.824, 'duration': 10.737}, {'end': 230.902, 'text': "we know that it's working.", 'start': 229.561, 'duration': 1.341}, {'end': 236.645, 'text': "so localhost colon 3000, that's the dev server that this one creates for us and you can see,", 'start': 230.902, 'duration': 5.743}, {'end': 239.586, 'text': 'you can also just click here and it will open up in your browser.', 'start': 236.645, 'duration': 2.941}, {'end': 241.087, 'text': 'hopefully all right.', 'start': 239.586, 'duration': 1.501}, {'end': 242.108, 'text': "so that's the dependencies.", 'start': 241.087, 'duration': 1.021}], 'summary': 'Installed style components library, types, and verified functionality on localhost:3000.', 'duration': 47.926, 'max_score': 194.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0194182.jpg'}], 'start': 0.256, 'title': 'Building react quiz with typescript', 'summary': 'Details creating a quiz app with react and typescript, setting up with typescript support, demonstrating the finished app, and focusing on react and typescript usage.', 'chapters': [{'end': 113.778, 'start': 0.256, 'title': 'Building react quiz with typescript', 'summary': 'Details the creation of a quiz application using react and typescript, including the process of setting up the application with typescript support and demonstrating the finished application, with a focus on the usage of react and typescript.', 'duration': 113.522, 'highlights': ['The tutorial demonstrates the creation of a quiz application using React and TypeScript.', 'The process of setting up the application with TypeScript support is explained, including using create-react-app with the typescript template.', 'The finished application is demonstrated, showcasing the usage of React and TypeScript.']}, {'end': 175.011, 'start': 113.818, 'title': 'Project cleanup and refactoring', 'summary': 'Focuses on cleaning up the project by removing unnecessary files such as setup tests, service worker, logo, index.css, app.test.tsx, and app.css, followed by refactoring the index.tsx and app.tsx files for improved project organization.', 'duration': 61.193, 'highlights': ['Unnecessary files such as setup tests, service worker, logo, index.css, app.test.tsx, and app.css are removed to streamline the project.', 'Refactoring in the index.tsx and app.tsx files involves removing unnecessary imports and code for improved project organization.']}, {'end': 242.108, 'start': 175.011, 'title': 'Building quiz functionality with style components', 'summary': 'Details installing style components and its types for building functionality for a quiz application, including using npm to install the dependencies and verifying the working of the application on localhost port 3000.', 'duration': 67.097, 'highlights': ['Using npm to install style components and its types for building quiz functionality, followed by verifying the working of the application on localhost port 3000.', "Installing style components and its types for the quiz application using 'npm install style-components' and 'npm install @types/styled-components'.", "Verifying the functionality of the quiz application by running 'npm start' and accessing it on localhost port 3000."]}], 'duration': 241.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0256.jpg', 'highlights': ['The tutorial demonstrates the creation of a quiz application using React and TypeScript.', 'The process of setting up the application with TypeScript support is explained, including using create-react-app with the typescript template.', 'The finished application is demonstrated, showcasing the usage of React and TypeScript.', 'Unnecessary files such as setup tests, service worker, logo, index.css, app.test.tsx, and app.css are removed to streamline the project.', 'Refactoring in the index.tsx and app.tsx files involves removing unnecessary imports and code for improved project organization.', 'Using npm to install style components and its types for building quiz functionality, followed by verifying the working of the application on localhost port 3000.', "Installing style components and its types for the quiz application using 'npm install style-components' and 'npm install @types/styled-components'.", "Verifying the functionality of the quiz application by running 'npm start' and accessing it on localhost port 3000."]}, {'end': 651.548, 'segs': [{'end': 294.368, 'src': 'embed', 'start': 266.417, 'weight': 1, 'content': [{'end': 269.978, 'text': 'or if you want to use another image, you can use that also.', 'start': 266.417, 'duration': 3.561}, {'end': 276.66, 'text': 'so if we check out this image, it should be in the downloaded folder and you can see i actually have two of them here,', 'start': 269.978, 'duration': 6.682}, {'end': 278.621, 'text': "because i've already downloaded it before.", 'start': 276.66, 'duration': 1.961}, {'end': 287.481, 'text': "So let's go inside the code editor again and inside the src folder we're going to create another folder that we call images.", 'start': 279.474, 'duration': 8.007}, {'end': 294.368, 'text': 'Maybe overkill for this one, as we only have one image, but I like to have a good structure on things.', 'start': 288.723, 'duration': 5.645}], 'summary': "Creating a new folder named 'images' inside 'src' folder for organizing downloaded images.", 'duration': 27.951, 'max_score': 266.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0266417.jpg'}, {'end': 381.013, 'src': 'embed', 'start': 336.251, 'weight': 2, 'content': [{'end': 337.631, 'text': 'So you can browse the fonts.', 'start': 336.251, 'duration': 1.38}, {'end': 338.752, 'text': 'You can search for them here.', 'start': 337.671, 'duration': 1.081}, {'end': 340.412, 'text': 'And then you add them.', 'start': 339.412, 'duration': 1}, {'end': 342.313, 'text': 'And then we get this embed link here.', 'start': 340.732, 'duration': 1.581}, {'end': 343.173, 'text': 'So copy this link.', 'start': 342.333, 'duration': 0.84}, {'end': 351.091, 'text': "Go back to our code editor and we're going to navigate inside of the public folder and we have the index.html.", 'start': 345.043, 'duration': 6.048}, {'end': 355.449, 'text': 'And in this case, going to paste it in here.', 'start': 351.212, 'duration': 4.237}, {'end': 357.87, 'text': 'so we import it in this index.html.', 'start': 355.449, 'duration': 2.421}, {'end': 365.573, 'text': 'this is the file that is run when the application is built, so we can import it here, just like in a regular html file.', 'start': 357.87, 'duration': 7.703}, {'end': 369.094, 'text': 'save it and this will make sure that we have those fonts all right.', 'start': 365.573, 'duration': 3.521}, {'end': 370.095, 'text': "so that's the fonts.", 'start': 369.094, 'duration': 1.001}, {'end': 375.557, 'text': "i can close this once and then we can just briefly check out the api that we're going to use for the questions.", 'start': 370.095, 'duration': 5.462}, {'end': 379.212, 'text': 'So I found this Open Trivia API.', 'start': 376.57, 'duration': 2.642}, {'end': 381.013, 'text': 'As you can see, we can configure it.', 'start': 379.652, 'duration': 1.361}], 'summary': 'Browsing, adding fonts and integrating open trivia api for configuration.', 'duration': 44.762, 'max_score': 336.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0336251.jpg'}, {'end': 466.992, 'src': 'embed', 'start': 423.435, 'weight': 0, 'content': [{'end': 430.137, 'text': "we probably have to create the proxy api or already use an api that won't show us the answers in the client.", 'start': 423.435, 'duration': 6.702}, {'end': 436.019, 'text': 'So we have to make a request to a server and then it will get a response with answers and stuff like that.', 'start': 430.717, 'duration': 5.302}, {'end': 443.263, 'text': 'But in our case, for example, if you have a React DevTools, you can just check the state and you will see all the questions there and the answers.', 'start': 436.58, 'duration': 6.683}, {'end': 447.725, 'text': "So it's a very simple implementation of a quiz game.", 'start': 443.963, 'duration': 3.762}, {'end': 449.606, 'text': 'And that should be it for the setup.', 'start': 448.245, 'duration': 1.361}, {'end': 452.167, 'text': "Let's move on to create the logic for the application.", 'start': 449.746, 'duration': 2.421}, {'end': 456.609, 'text': "And then last in the tutorial, we're going to create the UI, the design for the application.", 'start': 452.367, 'duration': 4.242}, {'end': 466.992, 'text': 'Okay, make sure that you have the application running by typing in npm start in the folder that we created with CreateDirectApp,', 'start': 459.85, 'duration': 7.142}], 'summary': 'Creating a simple quiz game with server request and ui implementation.', 'duration': 43.557, 'max_score': 423.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0423435.jpg'}, {'end': 569.654, 'src': 'embed', 'start': 550.849, 'weight': 5, 'content': [{'end': 564.57, 'text': "so the api file is going to be used where i create the logic for fetching data from the api and the utils file is just going to keep a small function that we're going to use to randomize the answers to the questions right and we're going to come back to those also.", 'start': 550.849, 'duration': 13.721}, {'end': 569.654, 'text': "and then later we're going to create more files here, because when we create the styles with the styles component,", 'start': 564.57, 'duration': 5.084}], 'summary': 'Creating api and utils files for fetching and randomizing data.', 'duration': 18.805, 'max_score': 550.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0550849.jpg'}], 'start': 242.108, 'title': 'Setting up fonts and images and creating a quiz game with react', 'summary': 'Details the process of downloading and organizing images, selecting and embedding google fonts, and exploring the open trivia api for implementing quiz functionality in the application. it also explains the process of setting up the application by creating components, files, and main logic functions, including fetching data from an api and triggering user actions. the emphasis is on securing the quiz by not exposing the answers in the client-side code.', 'chapters': [{'end': 400.988, 'start': 242.108, 'title': 'Setting up fonts and images for the project', 'summary': 'Details the process of downloading and organizing images, selecting and embedding google fonts, and exploring the open trivia api for implementing quiz functionality in the application.', 'duration': 158.88, 'highlights': ['The chapter details the process of downloading and organizing images', 'Selecting and embedding Google fonts', 'Exploring the Open Trivia API']}, {'end': 651.548, 'start': 401.268, 'title': 'Creating a quiz game with react', 'summary': 'Explains the process of setting up the application by creating components, files, and main logic functions, including fetching data from an api and triggering user actions. it also emphasizes the importance of securing the quiz by not exposing the answers in the client-side code.', 'duration': 250.28, 'highlights': ['The chapter emphasizes the importance of securing the quiz by not exposing the answers in the client-side code.', 'The chapter explains the process of setting up the application by creating components, files, and main logic functions.', 'The chapter details the main logic functions, including fetching data from an API and triggering user actions.']}], 'duration': 409.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0242108.jpg', 'highlights': ['The chapter emphasizes the importance of securing the quiz by not exposing the answers in the client-side code.', 'The chapter details the process of downloading and organizing images', 'Selecting and embedding Google fonts', 'Exploring the Open Trivia API', 'The chapter explains the process of setting up the application by creating components, files, and main logic functions.', 'The chapter details the main logic functions, including fetching data from an API and triggering user actions.']}, {'end': 1178.731, 'segs': [{'end': 683.329, 'src': 'embed', 'start': 651.548, 'weight': 0, 'content': [{'end': 664.492, 'text': 'so we specify it to HTML button element and we end it with a angle bracket like that, something like that.', 'start': 651.548, 'duration': 12.944}, {'end': 667.595, 'text': 'and of course we need to have a colon here also.', 'start': 664.492, 'duration': 3.103}, {'end': 674.241, 'text': "and as we're in react, i guess we have to tell it react.mouseEvent, also like that.", 'start': 667.595, 'duration': 6.646}, {'end': 675.622, 'text': 'so react.mouseEvent.', 'start': 674.241, 'duration': 1.381}, {'end': 681.347, 'text': "and then we specify it even more by telling it it's from an html button element.", 'start': 675.622, 'duration': 5.725}, {'end': 683.329, 'text': "so that's how you type this event.", 'start': 681.347, 'duration': 1.982}], 'summary': 'Specified html button element and react.mouseevent for event handling in react.', 'duration': 31.781, 'max_score': 651.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0651548.jpg'}, {'end': 728.479, 'src': 'embed', 'start': 702.905, 'weight': 1, 'content': [{'end': 709.669, 'text': "but first we're going to scaffold out our jsx here in the return statement.", 'start': 702.905, 'duration': 6.764}, {'end': 717.414, 'text': "so we wrap it in a parenthesis, first like this, And then we have the rapid div that's called app now.", 'start': 709.669, 'duration': 7.745}, {'end': 721.556, 'text': "We're going to rename these ones also later when we create the star components.", 'start': 718.254, 'duration': 3.302}, {'end': 724.257, 'text': 'But for now, they will be divs with class names.', 'start': 721.636, 'duration': 2.621}, {'end': 728.479, 'text': "And first, we're going to have an h1 tag with a header for the quiz.", 'start': 725.557, 'duration': 2.922}], 'summary': 'Scaffolding out jsx in return statement with h1 tag for the quiz.', 'duration': 25.574, 'max_score': 702.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0702905.jpg'}, {'end': 878.468, 'src': 'embed', 'start': 851.105, 'weight': 2, 'content': [{'end': 853.967, 'text': "So let's go inside the questioncard.tsx file.", 'start': 851.105, 'duration': 2.862}, {'end': 857.21, 'text': 'Just as before, we create parentheses here.', 'start': 854.448, 'duration': 2.762}, {'end': 861.854, 'text': "We can make an implicit return on this one so we don't have to have a return statement.", 'start': 857.791, 'duration': 4.063}, {'end': 867.519, 'text': "And as we're in TypeScript now, we have to type the props for this one.", 'start': 863.716, 'duration': 3.803}, {'end': 871.286, 'text': 'So we create a type, call it props.', 'start': 869.386, 'duration': 1.9}, {'end': 872.767, 'text': 'You can call it whatever you want.', 'start': 871.446, 'duration': 1.321}, {'end': 875.647, 'text': "It doesn't need to have the name props.", 'start': 872.927, 'duration': 2.72}, {'end': 878.468, 'text': "First, we're going to give it the question.", 'start': 876.468, 'duration': 2}], 'summary': 'Inside questioncard.tsx, an implicit return is used with typed props, including the question.', 'duration': 27.363, 'max_score': 851.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0851105.jpg'}, {'end': 980.03, 'src': 'embed', 'start': 930.164, 'weight': 4, 'content': [{'end': 934.125, 'text': 'first of all, we have to specify this one to be a functional component.', 'start': 930.164, 'duration': 3.961}, {'end': 942.248, 'text': "so just after the name here we have a colon and from react we have something that's called fc, so dot fc.", 'start': 934.125, 'duration': 8.123}, {'end': 944.488, 'text': 'these are the types from react itself.', 'start': 942.248, 'duration': 2.24}, {'end': 954.364, 'text': 'so it will tell typescript that this is a functional component and if we want to specify props, we do that inside of angled brackets like this.', 'start': 944.488, 'duration': 9.876}, {'end': 962.686, 'text': 'so we tell it that we want to use these props that we created up here and then, just as usual, we can destructure out the props.', 'start': 954.364, 'duration': 8.322}, {'end': 965.287, 'text': 'so we have the question, we have the answer.', 'start': 962.686, 'duration': 2.601}, {'end': 970.189, 'text': "you can see that we get this nice auto completion here, where it tells us what we've got.", 'start': 965.287, 'duration': 4.902}, {'end': 980.03, 'text': 'we have the callback, we have the user answer, We have the question number and we have the total questions.', 'start': 970.189, 'duration': 9.841}], 'summary': 'Specify functional component using react.fc, and use props for destructuring.', 'duration': 49.866, 'max_score': 930.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0930164.jpg'}, {'end': 1185.436, 'src': 'embed', 'start': 1156.625, 'weight': 6, 'content': [{'end': 1159.689, 'text': 'You can see that TypeScript complains here now because I set it to string.', 'start': 1156.625, 'duration': 3.064}, {'end': 1160.571, 'text': 'It will complain.', 'start': 1159.749, 'duration': 0.822}, {'end': 1164.276, 'text': 'We will make sure that this will get a true or false value later.', 'start': 1160.931, 'duration': 3.345}, {'end': 1165.718, 'text': 'So we have to change this one now.', 'start': 1164.376, 'duration': 1.342}, {'end': 1169.505, 'text': 'So it should be a Boolean instead.', 'start': 1167.864, 'duration': 1.641}, {'end': 1172.587, 'text': "You can see that it won't complain anymore.", 'start': 1169.525, 'duration': 3.062}, {'end': 1175.729, 'text': 'So this is one of the great strengths with TypeScript.', 'start': 1172.627, 'duration': 3.102}, {'end': 1178.731, 'text': 'It will tell you when you code, if you do something wrong.', 'start': 1175.869, 'duration': 2.862}, {'end': 1180.993, 'text': 'And you can correct it before the bug even happens.', 'start': 1178.831, 'duration': 2.162}, {'end': 1181.613, 'text': 'All right.', 'start': 1181.333, 'duration': 0.28}, {'end': 1183.534, 'text': 'Then we have an onClickHandler on this one.', 'start': 1181.713, 'duration': 1.821}, {'end': 1185.436, 'text': 'And this is going to call the callback.', 'start': 1183.594, 'duration': 1.842}], 'summary': 'Typescript ensures correct data types, preventing bugs. onclickhandler calls the callback.', 'duration': 28.811, 'max_score': 1156.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01156625.jpg'}], 'start': 651.548, 'title': 'Creating react trivia app components and functional component with typescript', 'summary': "Involves creating event handlers, jsx elements, and importing components for a react trivia app with a score display, loading message, question card, and next question button. it also explains how to create a functional component with typescript props, including defining the props, using the 'fc' from react, and utilizing the props inside the component, with a focus on typescript's ability to provide type checking and error prevention.", 'chapters': [{'end': 875.647, 'start': 651.548, 'title': 'Creating react trivia app components', 'summary': 'Involves creating event handlers, jsx elements, and importing components for a react trivia app with a score display, loading message, question card, and next question button.', 'duration': 224.099, 'highlights': ['Creating event handlers for button clicks and mouse events', 'Scaffolding JSX elements for the trivia app', 'Importing and typing components in TypeScript']}, {'end': 1178.731, 'start': 876.468, 'title': 'Creating a functional component with typescript props', 'summary': "Explains how to create a functional component with typescript props, including defining the props, using the 'fc' from react, and utilizing the props inside the component, with a focus on typescript's ability to provide type checking and error prevention.", 'duration': 302.263, 'highlights': ['Defining props for the functional component with TypeScript', "Utilizing 'fc' from React to specify the component as functional", 'Demonstrating the ability to destructure and use the props inside the component', 'Utilizing TypeScript for type checking and error prevention']}], 'duration': 527.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG0651548.jpg', 'highlights': ['Creating event handlers for button clicks and mouse events', 'Scaffolding JSX elements for the trivia app', 'Importing and typing components in TypeScript', 'Defining props for the functional component with TypeScript', "Utilizing 'fc' from React to specify the component as functional", 'Demonstrating the ability to destructure and use the props inside the component', 'Utilizing TypeScript for type checking and error prevention']}, {'end': 1725.129, 'segs': [{'end': 1215.547, 'src': 'embed', 'start': 1178.831, 'weight': 3, 'content': [{'end': 1180.993, 'text': 'And you can correct it before the bug even happens.', 'start': 1178.831, 'duration': 2.162}, {'end': 1181.613, 'text': 'All right.', 'start': 1181.333, 'duration': 0.28}, {'end': 1183.534, 'text': 'Then we have an onClickHandler on this one.', 'start': 1181.713, 'duration': 1.821}, {'end': 1185.436, 'text': 'And this is going to call the callback.', 'start': 1183.594, 'duration': 1.842}, {'end': 1188.017, 'text': 'Like so.', 'start': 1187.597, 'duration': 0.42}, {'end': 1188.658, 'text': 'We close it.', 'start': 1188.077, 'duration': 0.581}, {'end': 1190.759, 'text': "I'm going to have some text for the button also.", 'start': 1188.898, 'duration': 1.861}, {'end': 1195.022, 'text': 'And this one is also going to get the text in HTML format.', 'start': 1191.339, 'duration': 3.683}, {'end': 1196.483, 'text': 'So we create a span.', 'start': 1195.522, 'duration': 0.961}, {'end': 1199.637, 'text': 'and dangerously set.', 'start': 1198.516, 'duration': 1.121}, {'end': 1206.621, 'text': 'innerHTML equals curly brackets and we have the object with another set of curly brackets, underscore,', 'start': 1199.637, 'duration': 6.984}, {'end': 1215.547, 'text': 'underscore HTML and we give it the answer in this case and then we self-close the span.', 'start': 1206.621, 'duration': 8.926}], 'summary': 'Transcript: a discussion about code, including onclickhandler, callback, and html format.', 'duration': 36.716, 'max_score': 1178.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01178831.jpg'}, {'end': 1256.096, 'src': 'embed', 'start': 1229.063, 'weight': 0, 'content': [{'end': 1233.346, 'text': "so you can see that it complains now because it wants the props and we're going to give it the props also.", 'start': 1229.063, 'duration': 4.283}, {'end': 1239.471, 'text': "but first i'm going to create the states that we're going to use for this application and we're going to have six of them actually,", 'start': 1233.346, 'duration': 6.125}, {'end': 1240.772, 'text': "because i'm going to split them up.", 'start': 1239.471, 'duration': 1.301}, {'end': 1247.158, 'text': "that's great with hooks now you don't need to have one big state, we can have a few of them instead.", 'start': 1240.772, 'duration': 6.386}, {'end': 1256.096, 'text': "so up here, first we import, use state like that and just down below here in the component at the beginning we're going to create our states.", 'start': 1247.158, 'duration': 8.938}], 'summary': 'Creating six states for the application using hooks.', 'duration': 27.033, 'max_score': 1229.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01229063.jpg'}, {'end': 1586.791, 'src': 'embed', 'start': 1532.286, 'weight': 1, 'content': [{'end': 1547.337, 'text': "so we export const fetch, quiz questions like that and this one is going to be async and we're going to have a couple of parameters here,", 'start': 1532.286, 'duration': 15.051}, {'end': 1550.518, 'text': 'because we want to be able to specify how many questions that we want to grab.', 'start': 1547.337, 'duration': 3.181}, {'end': 1552.739, 'text': 'so we can create a parameter amount.', 'start': 1550.518, 'duration': 2.221}, {'end': 1558.821, 'text': "it's going to be a number and then we have another one that we call difficulty.", 'start': 1552.739, 'duration': 6.082}, {'end': 1565.719, 'text': 'this is going to be easy, medium or hard, because we can grab these from the api.', 'start': 1560.336, 'duration': 5.383}, {'end': 1567.66, 'text': 'so we should be able to set it here.', 'start': 1565.719, 'duration': 1.941}, {'end': 1568.881, 'text': 'how do we specify this?', 'start': 1567.66, 'duration': 1.221}, {'end': 1576.145, 'text': "because it can only be easy, medium or hard, and in typescript we have something that's called an enum.", 'start': 1568.881, 'duration': 7.264}, {'end': 1581.628, 'text': 'so export enum.', 'start': 1576.145, 'duration': 5.483}, {'end': 1586.791, 'text': 'we call it difficulty like this, and we can specify the constants inside of.', 'start': 1581.628, 'duration': 5.163}], 'summary': 'Creating an async function to fetch quiz questions with parameters for amount and difficulty. using typescript enum for difficulty levels.', 'duration': 54.505, 'max_score': 1532.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01532286.jpg'}], 'start': 1178.831, 'title': 'React fundamentals', 'summary': 'Covers react code review, bug fixing, onclickhandler implementation, dangerously set innerhtml usage, creation of states using usestate, and fetching quiz questions from an api with typescript enums.', 'chapters': [{'end': 1229.063, 'start': 1178.831, 'title': 'React code review and bug fixing', 'summary': 'Covers reviewing and correcting code, including implementing an onclickhandler and using dangerously set innerhtml for text formatting in a react app.', 'duration': 50.232, 'highlights': ['The chapter covers reviewing and correcting code, including implementing an onClickHandler and using dangerously set innerHTML for text formatting in a React app.', 'Implementing an onClickHandler to call a callback function for bug fixing.', 'Using dangerously set innerHTML to format text in HTML format.']}, {'end': 1725.129, 'start': 1229.063, 'title': 'Creating states and fetching api data', 'summary': 'Details the creation of six states using usestate and the implementation of a function to fetch quiz questions from an api, specifying parameters such as amount and difficulty using typescript enums.', 'duration': 496.066, 'highlights': ['Creation of six states using useState', 'Implementation of function to fetch quiz questions from API', 'Explanation of TypeScript enums for specifying difficulty parameter']}], 'duration': 546.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01178831.jpg', 'highlights': ['Creation of six states using useState', 'Implementation of function to fetch quiz questions from API', 'Explanation of TypeScript enums for specifying difficulty parameter', 'The chapter covers reviewing and correcting code, including implementing an onClickHandler and using dangerously set innerHTML for text formatting in a React app.', 'Implementing an onClickHandler to call a callback function for bug fixing.', 'Using dangerously set innerHTML to format text in HTML format.']}, {'end': 2110.568, 'segs': [{'end': 1751.907, 'src': 'embed', 'start': 1726.67, 'weight': 0, 'content': [{'end': 1732.134, 'text': "Then, in a const that I call data, I'm going to await because we are going to hit that endpoint now.", 'start': 1726.67, 'duration': 5.464}, {'end': 1735.196, 'text': 'So I await and then I have a parenthesis.', 'start': 1732.214, 'duration': 2.982}, {'end': 1736.837, 'text': 'I await again.', 'start': 1735.796, 'duration': 1.041}, {'end': 1739.939, 'text': "I get a lot of questions on why I'm using double awaits.", 'start': 1736.857, 'duration': 3.082}, {'end': 1744.062, 'text': "And that's because first we await the fetch itself.", 'start': 1740.279, 'duration': 3.783}, {'end': 1747.104, 'text': "And then we're going to wait when we convert it to JSON.", 'start': 1744.462, 'duration': 2.642}, {'end': 1749.945, 'text': 'So await fetch, parenthesis.', 'start': 1747.244, 'duration': 2.701}, {'end': 1751.907, 'text': 'We give it the endpoint like that.', 'start': 1750.166, 'duration': 1.741}], 'summary': 'Using double awaits to fetch and convert data to json from an endpoint.', 'duration': 25.237, 'max_score': 1726.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01726670.jpg'}, {'end': 1825.721, 'src': 'embed', 'start': 1788.621, 'weight': 4, 'content': [{'end': 1791.743, 'text': 'and up here we can import that function that we created.', 'start': 1788.621, 'duration': 3.122}, {'end': 1808.811, 'text': 'so import fetch quiz questions from dot forward slash, and we have it in the api.ts file like so.', 'start': 1791.743, 'duration': 17.068}, {'end': 1813.334, 'text': "and what i want to do now is to try this function out to see what we've got.", 'start': 1808.811, 'duration': 4.523}, {'end': 1825.721, 'text': 'so we have this function here fetch quiz questions, really hard to say for me, and we can call it here the console log,', 'start': 1813.334, 'duration': 12.387}], 'summary': 'Imported fetch quiz questions function from api.ts file and tested it with console log.', 'duration': 37.1, 'max_score': 1788.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01788621.jpg'}, {'end': 1920.45, 'src': 'heatmap', 'start': 1851.682, 'weight': 2, 'content': [{'end': 1857.126, 'text': 'and if you remember, in the api.tsi we created this enum here that i also also export.', 'start': 1851.682, 'duration': 5.444}, {'end': 1862.05, 'text': 'so that means that we can import this one in the app.tsx file.', 'start': 1857.126, 'duration': 4.924}, {'end': 1878.859, 'text': "so i'm going to mark this one with types and i import difficulty from dot forward slash, api like so,", 'start': 1862.05, 'duration': 16.809}, {'end': 1883.265, 'text': 'and that means that we can use it here in our console log.', 'start': 1878.859, 'duration': 4.406}, {'end': 1885.968, 'text': 'as the second argument from difficulty.', 'start': 1883.265, 'duration': 2.703}, {'end': 1893.457, 'text': "we're going to grab the easy one, save it, go back to our browser.", 'start': 1885.968, 'duration': 7.489}, {'end': 1898.002, 'text': 'you can see that we have everything here now, And here is the response.', 'start': 1893.457, 'duration': 4.545}, {'end': 1900.282, 'text': 'You can see that we have a response code of zero.', 'start': 1898.042, 'duration': 2.24}, {'end': 1901.443, 'text': 'And we have the result.', 'start': 1900.542, 'duration': 0.901}, {'end': 1902.863, 'text': 'So this is what we care about here.', 'start': 1901.463, 'duration': 1.4}, {'end': 1904.284, 'text': 'We have the 10 questions here.', 'start': 1902.923, 'duration': 1.361}, {'end': 1908.786, 'text': 'And now we can see the structure of the question object here.', 'start': 1904.744, 'duration': 4.042}, {'end': 1913.107, 'text': 'By looking at this one here, we can actually create the type for this one.', 'start': 1909.086, 'duration': 4.021}, {'end': 1916.569, 'text': 'So we have a category, the correct answer and difficulty.', 'start': 1913.968, 'duration': 2.601}, {'end': 1917.709, 'text': 'These are all strings.', 'start': 1916.649, 'duration': 1.06}, {'end': 1920.45, 'text': 'Then we have the incorrect answers in an array.', 'start': 1917.829, 'duration': 2.621}], 'summary': 'Imported enum from api.tsi, used in app.tsx to display 10 questions with response code 0.', 'duration': 34.286, 'max_score': 1851.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01851682.jpg'}, {'end': 1937.533, 'src': 'embed', 'start': 1909.086, 'weight': 1, 'content': [{'end': 1913.107, 'text': 'By looking at this one here, we can actually create the type for this one.', 'start': 1909.086, 'duration': 4.021}, {'end': 1916.569, 'text': 'So we have a category, the correct answer and difficulty.', 'start': 1913.968, 'duration': 2.601}, {'end': 1917.709, 'text': 'These are all strings.', 'start': 1916.649, 'duration': 1.06}, {'end': 1920.45, 'text': 'Then we have the incorrect answers in an array.', 'start': 1917.829, 'duration': 2.621}, {'end': 1923.051, 'text': 'And then we have the question and the type.', 'start': 1920.97, 'duration': 2.081}, {'end': 1925.172, 'text': "So let's move back to the code.", 'start': 1923.671, 'duration': 1.501}, {'end': 1932.59, 'text': "And inside of the API.ts file, I'm going to specify the type for each question.", 'start': 1927.526, 'duration': 5.064}, {'end': 1934.351, 'text': 'So type.', 'start': 1933.871, 'duration': 0.48}, {'end': 1937.533, 'text': "I'm going to export this one also.", 'start': 1936.032, 'duration': 1.501}], 'summary': 'Creating types for category, correct answer, and difficulty in api.ts file.', 'duration': 28.447, 'max_score': 1909.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01909086.jpg'}, {'end': 2018.584, 'src': 'embed', 'start': 1991.689, 'weight': 3, 'content': [{'end': 1996.192, 'text': 'But one thing I want to do here, also because I want to modify the state that I get back here,', 'start': 1991.689, 'duration': 4.503}, {'end': 2002.477, 'text': 'because in this case we have the correct answer in a separate property and we have the incorrect answers in a separate array.', 'start': 1996.192, 'duration': 6.285}, {'end': 2005.159, 'text': 'I want to have them in the same array,', 'start': 2002.877, 'duration': 2.282}, {'end': 2011.443, 'text': 'because what I want to do later is that I want to map through this array and create the answers in the UI in the JSX.', 'start': 2005.159, 'duration': 6.284}, {'end': 2013.683, 'text': "So it's easier to have them in one array.", 'start': 2011.823, 'duration': 1.86}, {'end': 2018.584, 'text': 'So we can have both the correct answer and the incorrect answers in one array instead.', 'start': 2013.863, 'duration': 4.721}], 'summary': 'Modify state to have correct and incorrect answers in the same array for easier mapping in ui.', 'duration': 26.895, 'max_score': 1991.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01991689.jpg'}], 'start': 1726.67, 'title': 'Typescript and async fetch usage', 'summary': 'Covers the usage of async await, fetch api, typescript enums, and console logging in a typescript file to fetch quiz questions from an api, including explanation of double awaits and handling of fetch and json conversion. it also discusses specifying types using typescript for a question object, including category, correct answer, difficulty, incorrect answers, question, and type, and modifying the state to include correct and incorrect answers in the same array for ui mapping.', 'chapters': [{'end': 1885.968, 'start': 1726.67, 'title': 'Async fetch function and typescript usage', 'summary': 'Covers the usage of async await, fetch api, typescript enums, and console logging in a typescript file to fetch quiz questions from an api, including explanation of why double awaits are used and handling of fetch and json conversion.', 'duration': 159.298, 'highlights': ['The usage of async await, fetch API, and JSON conversion is explained in relation to fetching quiz questions from an API, with the explanation of why double awaits are used.', 'The TypeScript enum for difficulty levels is utilized and explained in the context of fetching quiz questions from the API.', 'The process of importing functions from one file to another in TypeScript is demonstrated and explained.', 'The console logging of data and handling of function parameters in TypeScript is showcased.', 'The chapter introduces the concept of TypeScript and demonstrates its usage in the context of fetching quiz questions from an API.']}, {'end': 2110.568, 'start': 1885.968, 'title': 'Typescript type specification', 'summary': 'Discusses specifying types using typescript for a question object, including category, correct answer, difficulty, incorrect answers, question, and type. it also covers modifying the state to include correct and incorrect answers in the same array for ui mapping.', 'duration': 224.6, 'highlights': ['The chapter discusses specifying types using TypeScript for a question object, including category, correct answer, difficulty, incorrect answers, question, and type.', 'It also covers modifying the state to include correct and incorrect answers in the same array for UI mapping.']}], 'duration': 383.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG01726670.jpg', 'highlights': ['The usage of async await, fetch API, and JSON conversion is explained in relation to fetching quiz questions from an API, with the explanation of why double awaits are used.', 'The chapter discusses specifying types using TypeScript for a question object, including category, correct answer, difficulty, incorrect answers, question, and type.', 'The TypeScript enum for difficulty levels is utilized and explained in the context of fetching quiz questions from the API.', 'It also covers modifying the state to include correct and incorrect answers in the same array for UI mapping.', 'The process of importing functions from one file to another in TypeScript is demonstrated and explained.']}, {'end': 2630.45, 'segs': [{'end': 2133.598, 'src': 'embed', 'start': 2110.568, 'weight': 2, 'content': [{'end': 2118.134, 'text': 'we have a pair of curly brackets, because we return an object and then we spread the question.', 'start': 2110.568, 'duration': 7.566}, {'end': 2122.737, 'text': 'we want to use all the properties that we get from the question, and you can do that with es6 syntax.', 'start': 2118.134, 'duration': 4.603}, {'end': 2123.738, 'text': "that's called spread.", 'start': 2122.737, 'duration': 1.001}, {'end': 2124.819, 'text': "so that's what we're doing here.", 'start': 2123.738, 'duration': 1.081}, {'end': 2127.541, 'text': 'and then we add the new property of answer.', 'start': 2124.819, 'duration': 2.722}, {'end': 2133.598, 'text': "And there's actually one more thing I want to do, because I want to shuffle the array here,", 'start': 2129.537, 'duration': 4.061}], 'summary': 'Using es6 spread syntax to manipulate object properties and adding new property.', 'duration': 23.03, 'max_score': 2110.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02110568.jpg'}, {'end': 2194.119, 'src': 'embed', 'start': 2163.77, 'weight': 3, 'content': [{'end': 2168.191, 'text': "i'm going to create a new array by spreading it inside of a new one.", 'start': 2163.77, 'duration': 4.421}, {'end': 2179.795, 'text': 'this is also es6 syntax spreading it inside of here, creating a new array, and then i use sort, give it an inline arrow function and use math dot,', 'start': 2168.191, 'duration': 11.604}, {'end': 2185.033, 'text': 'random, minus, 0.5.', 'start': 2179.795, 'duration': 5.238}, {'end': 2190.737, 'text': 'do some auto formatting and this is kind of a quick fix for creating a randomizer function.', 'start': 2185.033, 'duration': 5.704}, {'end': 2194.119, 'text': "it's not completely accurate, but in our case it will do.", 'start': 2190.737, 'duration': 3.382}], 'summary': 'Creating a new array using es6 syntax with sort and random function for a quick randomizer.', 'duration': 30.349, 'max_score': 2163.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02163770.jpg'}, {'end': 2353.315, 'src': 'heatmap', 'start': 2249.453, 'weight': 0.947, 'content': [{'end': 2257.638, 'text': 'and then from the question dot correct answers correct answer.', 'start': 2249.453, 'duration': 8.185}, {'end': 2264.163, 'text': 'so we spread all the incorrect answers and the correct answer and then we shuffle it with this function here.', 'start': 2257.638, 'duration': 6.525}, {'end': 2271.128, 'text': 'do some auto formatting and it will look something like this yeah, and before we do anything, this one should be incorrect answers.', 'start': 2264.163, 'duration': 6.965}, {'end': 2279.141, 'text': "like. so i keep forgetting these s's.", 'start': 2274.215, 'duration': 4.926}, {'end': 2281.684, 'text': "i don't know why, but i keep forgetting them.", 'start': 2279.141, 'duration': 2.543}, {'end': 2286.791, 'text': 'make sure that it says incorrect answers with an s and also change the type to that one.', 'start': 2281.684, 'duration': 5.107}, {'end': 2289.434, 'text': 'save it, and this one goes also here.', 'start': 2286.791, 'duration': 2.643}, {'end': 2292.078, 'text': 'this property here should be called answers with an s.', 'start': 2289.434, 'duration': 2.644}, {'end': 2298.078, 'text': 'yeah, because it says answers here also.', 'start': 2296.277, 'duration': 1.801}, {'end': 2300.32, 'text': 'so keep forgetting those ss.', 'start': 2298.078, 'duration': 2.242}, {'end': 2304.203, 'text': "add them to these ones, otherwise it won't work all right.", 'start': 2300.32, 'duration': 3.883}, {'end': 2310.849, 'text': "save it, go back to the browser, reload it and you can see, now we have a promise here, but we can see that it's resolved.", 'start': 2304.203, 'duration': 6.646}, {'end': 2316.193, 'text': 'and if we look at the question here, you can see that we have the new property with answers here.', 'start': 2310.849, 'duration': 5.344}, {'end': 2318.515, 'text': 'so we can see that the correct answer for this one is bull.', 'start': 2316.193, 'duration': 2.322}, {'end': 2323.98, 'text': 'we have that one inside of here and the incorrect answers is bat, horse and snake, and we also have these ones.', 'start': 2318.515, 'duration': 5.465}, {'end': 2326.201, 'text': 'this is exactly what we want now.', 'start': 2324.62, 'duration': 1.581}, {'end': 2332.003, 'text': 'we have an easy way to map through all the answers when we do that, all right.', 'start': 2326.201, 'duration': 5.802}, {'end': 2333.944, 'text': "so let's get back inside of the code.", 'start': 2332.003, 'duration': 1.941}, {'end': 2335.705, 'text': 'this is the api.ts file.', 'start': 2333.944, 'duration': 1.761}, {'end': 2340.467, 'text': "it's finished now and also the utils.ts is finished.", 'start': 2335.705, 'duration': 4.762}, {'end': 2343.269, 'text': 'so back inside the app.tsx file.', 'start': 2340.467, 'duration': 2.802}, {'end': 2346.07, 'text': "so in the types we're also going to use the question state.", 'start': 2343.269, 'duration': 2.801}, {'end': 2348.031, 'text': 'so question state.', 'start': 2346.07, 'duration': 1.961}, {'end': 2350.471, 'text': "that's the one that we created.", 'start': 2349.309, 'duration': 1.162}, {'end': 2353.315, 'text': 'we import that one also here and now we can set this.', 'start': 2350.471, 'duration': 2.844}], 'summary': 'Shuffling and organizing answers, updating properties, and resolving a promise in the code.', 'duration': 103.862, 'max_score': 2249.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02249453.jpg'}, {'end': 2520.025, 'src': 'embed', 'start': 2488.367, 'weight': 1, 'content': [{'end': 2492.189, 'text': "so when we've done that, when we set the loading and the game over, we can hit the end point.", 'start': 2488.367, 'duration': 3.822}, {'end': 2496.171, 'text': 'so we create a const new questions.', 'start': 2492.189, 'duration': 3.982}, {'end': 2504.542, 'text': "then we're going to await and we call the fetch quiz questions and we're going to give it the two arguments that it needs.", 'start': 2496.171, 'duration': 8.371}, {'end': 2514.084, 'text': 'it needs the total questions and just as before, we give it the difficulty.easy as the second argument.', 'start': 2504.542, 'duration': 9.542}, {'end': 2520.025, 'text': 'all right, so that will grab the new questions and put it in this const here.', 'start': 2514.084, 'duration': 5.941}], 'summary': 'Code sets loading, fetches new questions with specific arguments.', 'duration': 31.658, 'max_score': 2488.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02488367.jpg'}, {'end': 2585.063, 'src': 'embed', 'start': 2554.822, 'weight': 0, 'content': [{'end': 2560.165, 'text': 'so it should be reset and we set the user answers to an empty array.', 'start': 2554.822, 'duration': 5.343}, {'end': 2564.267, 'text': "so we're kind of resetting everything here.", 'start': 2560.165, 'duration': 4.102}, {'end': 2566.808, 'text': 'so set number.', 'start': 2564.267, 'duration': 2.541}, {'end': 2575.073, 'text': "we're also setting that one to zero and then, when we've done all of this, we hopefully have our questions in our state and everything is working.", 'start': 2566.808, 'duration': 8.265}, {'end': 2585.063, 'text': "then we can set the loading false because we're not loading anymore, and this is it for the start trivia function.", 'start': 2575.073, 'duration': 9.99}], 'summary': 'Reset user answers to empty array, set number to zero, and set loading to false in start trivia function.', 'duration': 30.241, 'max_score': 2554.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02554822.jpg'}], 'start': 2110.568, 'title': 'Es6 object manipulation and trivia function implementation', 'summary': "Covers es6 syntax for object manipulation, including spreading properties and creating new properties, and explains the implementation of the 'start trivia' function, involving setting states, fetching questions from the api, resetting user answers, and handling errors.", 'chapters': [{'end': 2323.98, 'start': 2110.568, 'title': 'Es6 syntax for object manipulation', 'summary': 'Explains how to use es6 syntax to manipulate objects, including spreading properties, creating a new property, and shuffling an array to create a randomizer function.', 'duration': 213.412, 'highlights': ['ES6 syntax allows for spreading properties from an object, as demonstrated by spreading all the properties from the question object to be used in creating a new object.', 'The process of shuffling an array is demonstrated using ES6 syntax and a quick fix for creating a randomizer function, although it may not be entirely accurate.', 'The chapter emphasizes the importance of using proper naming conventions, as evidenced by the need to ensure correct pluralization and naming consistency for properties to function as intended.']}, {'end': 2630.45, 'start': 2324.62, 'title': 'Implementing start trivia function', 'summary': "Details the implementation of the 'start trivia' function, which involves setting various states, fetching new questions from the api, setting the score to zero, resetting user answers and number, and handling potential errors.", 'duration': 305.83, 'highlights': ["The 'start trivia' function involves setting loading to true, game over to false, fetching new questions, setting the questions state, setting the score to zero, and resetting user answers and number.", 'The API fetch is triggered when the start button is clicked, and it sets loading to true and game over to false.', 'New questions are fetched using the fetch quiz questions API with the total questions and difficulty parameters, and the questions state is updated.', 'The score is reset to zero, and the user answers and number are also reset to empty and zero, respectively.']}], 'duration': 519.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02110568.jpg', 'highlights': ["The 'start trivia' function involves setting loading to true, game over to false, fetching new questions, setting the questions state, setting the score to zero, and resetting user answers and number.", 'New questions are fetched using the fetch quiz questions API with the total questions and difficulty parameters, and the questions state is updated.', 'ES6 syntax allows for spreading properties from an object, as demonstrated by spreading all the properties from the question object to be used in creating a new object.', 'The process of shuffling an array is demonstrated using ES6 syntax and a quick fix for creating a randomizer function, although it may not be entirely accurate.']}, {'end': 3634.392, 'segs': [{'end': 2681.465, 'src': 'embed', 'start': 2630.45, 'weight': 0, 'content': [{'end': 2632.932, 'text': 'all right, so we know that we have our questions in the state.', 'start': 2630.45, 'duration': 2.482}, {'end': 2633.632, 'text': "that's fine.", 'start': 2632.932, 'duration': 0.7}, {'end': 2637.395, 'text': "it's working really nice.", 'start': 2633.632, 'duration': 3.763}, {'end': 2639.897, 'text': 'but for now also you can see that it just says loading questions.', 'start': 2637.395, 'duration': 2.502}, {'end': 2646.762, 'text': 'we want to display the questions and the answers here also, so we can modify our JSX here.', 'start': 2639.897, 'duration': 6.865}, {'end': 2657.071, 'text': 'so first this button here to start the game is only going to be displayed if the game is over or if the user has answered the last question.', 'start': 2648.444, 'duration': 8.627}, {'end': 2659.333, 'text': 'so we create curly brackets.', 'start': 2657.071, 'duration': 2.262}, {'end': 2667.119, 'text': 'we check if game over or we have double pipe user answers.', 'start': 2659.333, 'duration': 7.786}, {'end': 2671.082, 'text': 'dot length equals total questions.', 'start': 2667.119, 'duration': 3.963}, {'end': 2675.926, 'text': "then we know that we're on the last question and then we're going to display this button.", 'start': 2671.082, 'duration': 4.844}, {'end': 2681.465, 'text': 'It can get a little bit messy here now.', 'start': 2679.184, 'duration': 2.281}], 'summary': 'Modify jsx to display questions and answers, conditionally show start game button.', 'duration': 51.015, 'max_score': 2630.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02630450.jpg'}, {'end': 2741.797, 'src': 'embed', 'start': 2706.131, 'weight': 1, 'content': [{'end': 2709.454, 'text': "okay, that's the start button and then we want to show the score.", 'start': 2706.131, 'duration': 3.323}, {'end': 2713.637, 'text': "we only want to show the score if we're not in a game over mode.", 'start': 2709.454, 'duration': 4.183}, {'end': 2716.199, 'text': 'for this one.', 'start': 2713.637, 'duration': 2.562}, {'end': 2719.522, 'text': 'so curly brackets, not game over.', 'start': 2716.199, 'duration': 3.323}, {'end': 2725.667, 'text': 'we have another turner operator and otherwise we show null and we have the end.', 'start': 2719.522, 'duration': 6.145}, {'end': 2732.653, 'text': 'curly bracket, like so and the loading questions is only going to be shown when we load something.', 'start': 2725.667, 'duration': 6.986}, {'end': 2741.797, 'text': 'so curly bracket, loading like so and null.', 'start': 2732.653, 'duration': 9.144}], 'summary': 'Start button activates score display; hide if game over.', 'duration': 35.666, 'max_score': 2706.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02706131.jpg'}, {'end': 2845.693, 'src': 'embed', 'start': 2797.456, 'weight': 3, 'content': [{'end': 2806.878, 'text': "so if we're not loading and if it's not game over, we're going to show the question card, save it, go back to the browser, start.", 'start': 2797.456, 'duration': 9.422}, {'end': 2809.518, 'text': 'you can see that we have the question and the answers here.', 'start': 2806.878, 'duration': 2.64}, {'end': 2811.419, 'text': "so that's sweet.", 'start': 2809.518, 'duration': 1.901}, {'end': 2816.5, 'text': "and we have the next question button also, but we haven't implemented those functions yet.", 'start': 2811.419, 'duration': 5.081}, {'end': 2819.382, 'text': "right, that's the question card.", 'start': 2818.021, 'duration': 1.361}, {'end': 2833.453, 'text': "and then we have the next button, and this one is only going to be shown if we're not in a game over and we're not loading and the user answers.", 'start': 2819.382, 'duration': 14.071}, {'end': 2838.709, 'text': 'dot length equals number plus one.', 'start': 2833.453, 'duration': 5.256}, {'end': 2844.172, 'text': 'and by doing this we just want to show the next question when the user actually has put in an answer.', 'start': 2838.709, 'duration': 5.463}, {'end': 2845.693, 'text': "so that's why we check it here.", 'start': 2844.172, 'duration': 1.521}], 'summary': 'Implementing question card and next button functionalities in the game.', 'duration': 48.237, 'max_score': 2797.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02797456.jpg'}, {'end': 2928.833, 'src': 'heatmap', 'start': 2873.779, 'weight': 0.925, 'content': [{'end': 2881.683, 'text': "now i'm gonna move up the button inside of there and down below here.", 'start': 2873.779, 'duration': 7.904}, {'end': 2882.744, 'text': 'colon and null.', 'start': 2881.683, 'duration': 1.061}, {'end': 2895.119, 'text': 'yeah, it should just be two equal signs there, of course, and do some auto formatting, and i think that this will work.', 'start': 2885.39, 'duration': 9.729}, {'end': 2898.762, 'text': 'go back to the browser.', 'start': 2895.119, 'duration': 3.643}, {'end': 2903.826, 'text': "yeah, so now it's not showing, because we have to give an answer first before we're showing that one.", 'start': 2898.762, 'duration': 5.064}, {'end': 2913.529, 'text': "yeah, and it's telling me that it should have a key prop here we're going to fix that one also, and that one is in the question card, because here,", 'start': 2903.826, 'duration': 9.703}, {'end': 2915.109, 'text': 'where we map through these ones,', 'start': 2913.529, 'duration': 1.58}, {'end': 2925.672, 'text': 'we should have a key and we can give it the answer as a key and this will make this arrow go away or this warning all right.', 'start': 2915.109, 'duration': 10.563}, {'end': 2926.932, 'text': 'so this is working.', 'start': 2925.672, 'duration': 1.26}, {'end': 2928.833, 'text': 'now go back to the app.tsx.', 'start': 2926.932, 'duration': 1.901}], 'summary': 'Fixing code errors and warnings in app.tsx for improved functionality.', 'duration': 55.054, 'max_score': 2873.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02873779.jpg'}, {'end': 3053.98, 'src': 'embed', 'start': 3021.938, 'weight': 5, 'content': [{'end': 3023.96, 'text': "then we know if if it's correct or not.", 'start': 3021.938, 'duration': 2.022}, {'end': 3033.052, 'text': 'so this will give us true or false add score if answer is correct.', 'start': 3023.96, 'duration': 9.092}, {'end': 3046.937, 'text': 'so if correct set score and we have the previous score and we add it by one like, so all right.', 'start': 3033.052, 'duration': 13.885}, {'end': 3053.98, 'text': "so that's if it's correct, then we add to the score and then we're going to save the answer in the array of answers here and we have this answer.", 'start': 3046.937, 'duration': 7.043}], 'summary': 'System scores and saves correct answers in array.', 'duration': 32.042, 'max_score': 3021.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03021938.jpg'}, {'end': 3168.731, 'src': 'heatmap', 'start': 3118.436, 'weight': 0.784, 'content': [{'end': 3121.417, 'text': 'Do some order formatting.', 'start': 3118.436, 'duration': 2.981}, {'end': 3125.239, 'text': 'And this will make sure that it creates this object with the data about the answer.', 'start': 3121.697, 'duration': 3.542}, {'end': 3127.42, 'text': 'And then we need to put it in the answer array.', 'start': 3125.459, 'duration': 1.961}, {'end': 3130.741, 'text': 'Set user answers.', 'start': 3128.36, 'duration': 2.381}, {'end': 3134.723, 'text': 'We have the previous state.', 'start': 3133.522, 'duration': 1.201}, {'end': 3136.523, 'text': 'And we create a new array.', 'start': 3135.383, 'duration': 1.14}, {'end': 3138.284, 'text': 'Spread out the previous.', 'start': 3137.164, 'duration': 1.12}, {'end': 3140.205, 'text': 'And we give it the answer object.', 'start': 3139.044, 'duration': 1.161}, {'end': 3146.966, 'text': 'auto format it and save it, and this should be it for the answers.', 'start': 3141.425, 'duration': 5.541}, {'end': 3148.026, 'text': 'go back to the browser.', 'start': 3146.966, 'duration': 1.06}, {'end': 3148.907, 'text': 'see that it works.', 'start': 3148.026, 'duration': 0.881}, {'end': 3152.948, 'text': 'reload it, start.', 'start': 3148.907, 'duration': 4.041}, {'end': 3160.169, 'text': "yeah, you can see, the next question is showing up also, but it's not working now because we haven't implemented this function.", 'start': 3152.948, 'duration': 7.221}, {'end': 3161.669, 'text': 'but it seems to be working.', 'start': 3160.169, 'duration': 1.5}, {'end': 3165.97, 'text': 'so we just have to implement that function also and then we have a fully working game.', 'start': 3161.669, 'duration': 4.301}, {'end': 3168.731, 'text': "but it will look like crap because we haven't styled it yet.", 'start': 3165.97, 'duration': 2.761}], 'summary': 'Implement order formatting and user answers to create a fully working game.', 'duration': 50.295, 'max_score': 3118.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03118436.jpg'}, {'end': 3160.169, 'src': 'embed', 'start': 3125.459, 'weight': 7, 'content': [{'end': 3127.42, 'text': 'And then we need to put it in the answer array.', 'start': 3125.459, 'duration': 1.961}, {'end': 3130.741, 'text': 'Set user answers.', 'start': 3128.36, 'duration': 2.381}, {'end': 3134.723, 'text': 'We have the previous state.', 'start': 3133.522, 'duration': 1.201}, {'end': 3136.523, 'text': 'And we create a new array.', 'start': 3135.383, 'duration': 1.14}, {'end': 3138.284, 'text': 'Spread out the previous.', 'start': 3137.164, 'duration': 1.12}, {'end': 3140.205, 'text': 'And we give it the answer object.', 'start': 3139.044, 'duration': 1.161}, {'end': 3146.966, 'text': 'auto format it and save it, and this should be it for the answers.', 'start': 3141.425, 'duration': 5.541}, {'end': 3148.026, 'text': 'go back to the browser.', 'start': 3146.966, 'duration': 1.06}, {'end': 3148.907, 'text': 'see that it works.', 'start': 3148.026, 'duration': 0.881}, {'end': 3152.948, 'text': 'reload it, start.', 'start': 3148.907, 'duration': 4.041}, {'end': 3160.169, 'text': "yeah, you can see, the next question is showing up also, but it's not working now because we haven't implemented this function.", 'start': 3152.948, 'duration': 7.221}], 'summary': 'Creating and saving user answers, implementing function for next question.', 'duration': 34.71, 'max_score': 3125.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03125459.jpg'}, {'end': 3313.33, 'src': 'embed', 'start': 3286.209, 'weight': 9, 'content': [{'end': 3292.592, 'text': "But, as I told you, we can't really see if we put in the correct answer, because we do all that stuff with the styling.", 'start': 3286.209, 'duration': 6.383}, {'end': 3294.673, 'text': "And that's what we're going to do next.", 'start': 3293.412, 'duration': 1.261}, {'end': 3297.274, 'text': "We're going to use style components to style this quiz.", 'start': 3294.713, 'duration': 2.561}, {'end': 3301.805, 'text': 'right before we move on with the styling for this one.', 'start': 3298.704, 'duration': 3.101}, {'end': 3308.288, 'text': "i'm going to fix these types because i forgot that we had these any types here and if we can fix it, we should do that.", 'start': 3301.805, 'duration': 6.483}, {'end': 3313.33, 'text': "so we can type this correctly and we're going to change this callback and the user answer.", 'start': 3308.288, 'duration': 5.042}], 'summary': 'Using style components to style the quiz and fix any type issues.', 'duration': 27.121, 'max_score': 3286.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03286209.jpg'}, {'end': 3479.258, 'src': 'embed', 'start': 3451.062, 'weight': 15, 'content': [{'end': 3454.903, 'text': "Go back to the browser, reload it, and it still works, and that's great.", 'start': 3451.062, 'duration': 3.841}, {'end': 3458.525, 'text': "So that's the types, let's move on with the styling.", 'start': 3456.204, 'duration': 2.321}, {'end': 3467.928, 'text': "Okay, we're going to give this quiz some styling, but first we have to also make sure that we display the score.", 'start': 3458.545, 'duration': 9.383}, {'end': 3468.909, 'text': 'I forgot that one.', 'start': 3468.028, 'duration': 0.881}, {'end': 3472.15, 'text': 'So we have this state with score, so move down here to the JSX.', 'start': 3469.049, 'duration': 3.101}, {'end': 3479.258, 'text': 'In the app.tsx component just somewhere here.', 'start': 3472.89, 'duration': 6.368}], 'summary': 'Incorporated styling and displayed quiz score, achieving browser reload functionality.', 'duration': 28.196, 'max_score': 3451.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03451062.jpg'}, {'end': 3555.203, 'src': 'embed', 'start': 3504.648, 'weight': 13, 'content': [{'end': 3508.589, 'text': "now we're going to create some styling for the app.tsx file first.", 'start': 3504.648, 'duration': 3.941}, {'end': 3519.033, 'text': "so inside the source folder, the src folder, create a new file, app.styles.ts, and we're going to import some stuff from style component.", 'start': 3508.589, 'duration': 10.444}, {'end': 3532.456, 'text': 'so import styled coma and then we destructure out, create global style like that from dot style components.', 'start': 3519.033, 'duration': 13.423}, {'end': 3536.537, 'text': "so style is the regular thing that you import and we're also importing, create global style.", 'start': 3532.456, 'duration': 4.081}, {'end': 3538.778, 'text': 'i think it is self-explaining.', 'start': 3536.537, 'duration': 2.241}, {'end': 3541.359, 'text': "we're going to create some global styling with that one.", 'start': 3538.778, 'duration': 2.581}, {'end': 3543.559, 'text': "so that's the first thing that we're going to do.", 'start': 3541.359, 'duration': 2.2}, {'end': 3555.203, 'text': 'but first we also want to import our background image bd image you can call it whatever you want from dot forward slash, images forward slash,', 'start': 3543.559, 'duration': 11.644}], 'summary': 'Create global styling in app.styles.ts and import background image.', 'duration': 50.555, 'max_score': 3504.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03504648.jpg'}, {'end': 3611.454, 'src': 'embed', 'start': 3587.396, 'weight': 11, 'content': [{'end': 3596.704, 'text': "you don't need to call it global style, but we call the create global style with double back ticks and we can create a global styling.", 'start': 3587.396, 'duration': 9.308}, {'end': 3598.005, 'text': 'so first we set the html.', 'start': 3596.704, 'duration': 1.301}, {'end': 3609.012, 'text': "i'm going to set the height to 100 on that one And, just as usual when I style stuff like this, there are some room for optimization, I think.", 'start': 3598.005, 'duration': 11.007}, {'end': 3611.454, 'text': 'I just did his styles really quickly.', 'start': 3609.473, 'duration': 1.981}], 'summary': 'Using double back ticks, create a global style for setting html height to 100.', 'duration': 24.058, 'max_score': 3587.396, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03587396.jpg'}], 'start': 2630.45, 'title': 'Building a react quiz game', 'summary': 'Focuses on modifying jsx to control the display of game elements, validating and saving user answers, implementing game functions, and styling the quiz app, covering es6 syntax, spread operator, and style components.', 'chapters': [{'end': 2990.115, 'start': 2630.45, 'title': 'React game development progress', 'summary': 'Focuses on modifying jsx to control the display of start button, score, loading questions, question card, and next button based on game state, user input, and current question number.', 'duration': 359.665, 'highlights': ['The start button is displayed only when the game is over or the user has answered the last question, determined by checking if game over or user answers dot length equals total questions, ensuring a smooth game flow.', 'The score is only shown if the game is not over, managed by using a turner operator to display null when game over, maintaining an intuitive user interface.', 'The loading questions text is shown during the loading process, creating a responsive user experience.', 'The question card is displayed only when not loading and not in game over mode, ensuring the proper presentation of each question and answer set.', 'The next button is conditionally displayed based on not being in a game over mode, not loading, the user having answered the current question, and not being on the last question, ensuring proper user interaction and game flow.']}, {'end': 3152.948, 'start': 2990.115, 'title': 'Validating and saving user answers', 'summary': 'Covers the process of validating user answers, incrementing the score if correct, and saving the answers in an array, using es6 syntax and spread operator. it also involves checking the correctness of the answers and adding the correct ones to the score.', 'duration': 162.833, 'highlights': ['The process involves validating user answers and checking them against the correct value or answer.', "Incrementing the score by one if the user's answer is correct.", "Saving the user's answer in an array."]}, {'end': 3450.501, 'start': 3152.948, 'title': 'Implementing game functions & styling', 'summary': "Covers implementing game functions for moving to the next question, checking if it's the last question, and setting game over, as well as discussing the need for styling with style components and making type adjustments to fix any type errors in the code.", 'duration': 297.553, 'highlights': ["Implementing game functions for moving to the next question, checking if it's the last question, and setting game over", 'Discussion on the need for styling with style components', 'Making type adjustments to fix any type errors in the code']}, {'end': 3634.392, 'start': 3451.062, 'title': 'Styling quiz app and creating global styles', 'summary': 'Covers styling the quiz app and creating global styles with examples of setting html height to 100 and importing background images.', 'duration': 183.33, 'highlights': ['Setting HTML height to 100', 'Creating global style with backticks', 'Importing background images', 'Creating app.styles.ts file for styling', 'Reloading the browser to ensure functionality']}], 'duration': 1003.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG02630450.jpg', 'highlights': ['The start button is displayed only when the game is over or the user has answered the last question, ensuring a smooth game flow.', 'The score is only shown if the game is not over, managed by using a turner operator to display null when game over, maintaining an intuitive user interface.', 'The loading questions text is shown during the loading process, creating a responsive user experience.', 'The question card is displayed only when not loading and not in game over mode, ensuring the proper presentation of each question and answer set.', 'The next button is conditionally displayed based on not being in a game over mode, not loading, the user having answered the current question, and not being on the last question, ensuring proper user interaction and game flow.', 'The process involves validating user answers and checking them against the correct value or answer.', "Incrementing the score by one if the user's answer is correct.", "Saving the user's answer in an array.", "Implementing game functions for moving to the next question, checking if it's the last question, and setting game over.", 'Discussion on the need for styling with style components.', 'Making type adjustments to fix any type errors in the code.', 'Setting HTML height to 100.', 'Creating global style with backticks.', 'Importing background images.', 'Creating app.styles.ts file for styling.', 'Reloading the browser to ensure functionality.']}, {'end': 4799.756, 'segs': [{'end': 3750.889, 'src': 'heatmap', 'start': 3634.392, 'weight': 0, 'content': [{'end': 3651.445, 'text': 'we set the background dash image, the url, and then we can grab this url with dollar sign, curly brackets, bg image like that.', 'start': 3634.392, 'duration': 17.053}, {'end': 3657.149, 'text': 'and then we set the background size to cover.', 'start': 3651.445, 'duration': 5.704}, {'end': 3660.792, 'text': 'i set the margin to zero.', 'start': 3657.149, 'duration': 3.643}, {'end': 3665.155, 'text': 'the padding is going to be 0 and 20 pixels.', 'start': 3660.792, 'duration': 4.363}, {'end': 3671.58, 'text': 'i set the display to flex and justify content to sender.', 'start': 3665.155, 'duration': 6.425}, {'end': 3673.301, 'text': "so that's the body.", 'start': 3671.58, 'duration': 1.721}, {'end': 3675.383, 'text': 'and then i have an asterisk.', 'start': 3673.301, 'duration': 2.082}, {'end': 3688.075, 'text': "i'm going to set the box sizing, box sizing to border box, and then i'm also going to set the font on every element on this one.", 'start': 3675.383, 'duration': 12.692}, {'end': 3699.661, 'text': 'so font family, catamaran and sans riff as a fallback font, all right.', 'start': 3688.075, 'duration': 11.586}, {'end': 3701.142, 'text': "so that's the global styling.", 'start': 3699.661, 'duration': 1.481}, {'end': 3706.086, 'text': "i'm actually going to import that one in the app component now to see if this background image works.", 'start': 3701.142, 'duration': 4.944}, {'end': 3714.973, 'text': 'so go back to the app.tsx file and up here i mark it with styles.', 'start': 3706.086, 'duration': 8.887}, {'end': 3728.985, 'text': 'i import global style from dot forward slash app.styles and then, when you create a global style with style components.', 'start': 3714.973, 'duration': 14.012}, {'end': 3733.905, 'text': 'we get the regular component here, so we can use that one down in the JSX.', 'start': 3728.985, 'duration': 4.92}, {'end': 3735.806, 'text': 'we can put it somewhere here at the top.', 'start': 3733.905, 'duration': 1.901}, {'end': 3737.166, 'text': 'so I create a fragment.', 'start': 3735.806, 'duration': 1.36}, {'end': 3742.067, 'text': 'because JSX can only return one element.', 'start': 3737.166, 'duration': 4.901}, {'end': 3750.889, 'text': 'I close it here and then we can use the global style component like this.', 'start': 3742.067, 'duration': 8.822}], 'summary': 'Set background image, size, margin, padding, font, and import global style in app component.', 'duration': 107.675, 'max_score': 3634.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03634392.jpg'}, {'end': 3894.716, 'src': 'embed', 'start': 3854.312, 'weight': 2, 'content': [{'end': 3857.754, 'text': 'Then we have the h1 tag and this is going to be this one up here.', 'start': 3854.312, 'duration': 3.442}, {'end': 3861.456, 'text': "That's going to be the actual logo that I'm styling with CSS.", 'start': 3857.854, 'duration': 3.602}, {'end': 3875.105, 'text': 'All right, so the font family is going to be fascinate inline, not impact inline, like that.', 'start': 3862.56, 'duration': 12.545}, {'end': 3880.407, 'text': 'Then I set the background image.', 'start': 3878.867, 'duration': 1.54}, {'end': 3889.791, 'text': 'And this one is going to be the linear gradient, so linear dash gradient.', 'start': 3884.889, 'duration': 4.902}, {'end': 3894.716, 'text': "And inside it's going to be 180 degrees, 180 deg.", 'start': 3891.414, 'duration': 3.302}], 'summary': "Styling h1 tag with css, using font family 'fascinate inline' and linear gradient background.", 'duration': 40.404, 'max_score': 3854.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03854312.jpg'}, {'end': 4043.034, 'src': 'heatmap', 'start': 3943.315, 'weight': 6, 'content': [{'end': 3949.119, 'text': 'And we have the Moss-BackgroundClip.', 'start': 3943.315, 'duration': 5.804}, {'end': 3959.232, 'text': "clip, it's going to be text and we have the moss text dash fill.", 'start': 3951.465, 'duration': 7.767}, {'end': 3972.583, 'text': 'dash color is going to be transparent, double dash, maybe all right.', 'start': 3959.232, 'duration': 13.351}, {'end': 3975.286, 'text': "now we're going to have some drop shadow on this one.", 'start': 3972.583, 'duration': 2.703}, {'end': 3982.789, 'text': 'so we set the filter to drop dash shadow and two pixels.', 'start': 3975.286, 'duration': 7.503}, {'end': 3985.673, 'text': 'two pixels and the color is going to be 0085 a3.', 'start': 3982.789, 'duration': 2.884}, {'end': 3989.117, 'text': 'the font size is going to be 70 pixels.', 'start': 3985.673, 'duration': 3.444}, {'end': 3994.463, 'text': 'text align is going to be center.', 'start': 3989.117, 'duration': 5.346}, {'end': 4005.099, 'text': 'the margin is going to be 20 pixels on this one.', 'start': 4001.977, 'duration': 3.122}, {'end': 4015.887, 'text': "okay, we're not really finished yet, but we can import these styles inside of here in the app.tsx file, just to see that this one works.", 'start': 4005.099, 'duration': 10.788}, {'end': 4024.874, 'text': 'so we import the wrapper and below here we have to change our jsx because now, instead of this div with class name app,', 'start': 4015.887, 'duration': 8.987}, {'end': 4030.618, 'text': "we're going to use the wrapper component and make sure to also close it down below here.", 'start': 4024.874, 'duration': 5.744}, {'end': 4037.912, 'text': "save it, go back to the browser and you can see that it's not quite working here and i don't know why.", 'start': 4031.889, 'duration': 6.023}, {'end': 4043.034, 'text': "i think it's those app.styles.", 'start': 4037.912, 'duration': 5.122}], 'summary': 'Styling the moss-backgroundclip with drop shadow and 70px font size.', 'duration': 45.802, 'max_score': 3943.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03943315.jpg'}, {'end': 4620.861, 'src': 'embed', 'start': 4595.295, 'weight': 7, 'content': [{'end': 4603.668, 'text': 'and the last one is the text shadow 0 pixels 1 pixel, 0 pixel.', 'start': 4595.295, 'duration': 8.373}, {'end': 4607.451, 'text': 'RGBA 0, 0, 0 and 0.25..', 'start': 4603.668, 'duration': 3.783}, {'end': 4608.551, 'text': 'And auto format it.', 'start': 4607.451, 'duration': 1.1}, {'end': 4610.913, 'text': "So that's the styling.", 'start': 4609.732, 'duration': 1.181}, {'end': 4614.396, 'text': 'Now we just need to implement it in the component itself.', 'start': 4611.954, 'duration': 2.442}, {'end': 4616.958, 'text': 'So optimize it if you want to do that.', 'start': 4614.616, 'duration': 2.342}, {'end': 4618.279, 'text': 'At least it works now.', 'start': 4617.138, 'duration': 1.141}, {'end': 4620.861, 'text': 'But it may not be the most optimized CSS.', 'start': 4618.579, 'duration': 2.282}], 'summary': 'Styling includes text shadow with specified pixels and rgba values. implementation may require optimization.', 'duration': 25.566, 'max_score': 4595.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG04595295.jpg'}, {'end': 4707.267, 'src': 'embed', 'start': 4681.011, 'weight': 5, 'content': [{'end': 4687.618, 'text': "we're going to check the user answer And here I'm using something that's called optional chaining in TypeScript.", 'start': 4681.011, 'duration': 6.607}, {'end': 4692.62, 'text': 'So I create a question mark, dot, and the correct answer.', 'start': 4687.658, 'duration': 4.962}, {'end': 4696.282, 'text': 'And I check it if that one equals the answer.', 'start': 4694.001, 'duration': 2.281}, {'end': 4698.683, 'text': 'We should have triple equal sign.', 'start': 4697.382, 'duration': 1.301}, {'end': 4703.305, 'text': "So if I remove this one, we don't actually know if we have a value here.", 'start': 4698.703, 'duration': 4.602}, {'end': 4707.267, 'text': 'But if we use a question mark, this one will not throw an error.', 'start': 4703.905, 'duration': 3.362}], 'summary': 'Using optional chaining in typescript to check user answer for correctness.', 'duration': 26.256, 'max_score': 4681.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG04681011.jpg'}, {'end': 4781.382, 'src': 'embed', 'start': 4752.679, 'weight': 4, 'content': [{'end': 4757.441, 'text': "so, as you can see, i answered wrong, but it's giving me the correct answer here.", 'start': 4752.679, 'duration': 4.762}, {'end': 4759.222, 'text': 'so everything seems to be working.', 'start': 4757.441, 'duration': 1.781}, {'end': 4768.247, 'text': "fine, yeah, and that's the last question.", 'start': 4759.222, 'duration': 9.025}, {'end': 4770.568, 'text': 'and then it gives us the start button again.', 'start': 4768.247, 'duration': 2.321}, {'end': 4776.719, 'text': "so the quiz is working, And that's super sweet.", 'start': 4770.568, 'duration': 6.151}, {'end': 4781.382, 'text': 'So this is how you build a fairly simple little quiz game with React and TypeScript.', 'start': 4776.739, 'duration': 4.643}], 'summary': 'Quiz game built with react and typescript, working well.', 'duration': 28.703, 'max_score': 4752.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG04752679.jpg'}], 'start': 3634.392, 'title': 'Styling react components with typescript', 'summary': 'Covers setting global styling for the app and specific components with detailed css properties and values, aiming to optimize css and enhance visual appeal. it also demonstrates styling react components with typescript, including setting margins, padding, colors, and other styles, along with implementing optional chaining in typescript and building a quiz game with react and typescript.', 'chapters': [{'end': 3989.117, 'start': 3634.392, 'title': 'Styling with css in app component', 'summary': 'Covers setting global styling for the app, including background image and font, and then proceeds to style specific components like wrapper, p tag, score class, and h1 tag with detailed css properties and values, aiming to optimize css and enhance visual appeal.', 'duration': 354.725, 'highlights': ['The chapter covers setting global styling for the app, including background image and font, and then proceeds to style specific components like wrapper, p tag, score class, and h1 tag with detailed CSS properties and values, aiming to optimize CSS and enhance visual appeal.', "The font family is set to 'catamaran' with 'sans riff' as a fallback font, the background image is a linear gradient with specific color values, and various WebKit properties are utilized to enhance the visual appearance.", "The p tag is styled with a color set to white, the score class has a font size of 2rem and a color set to white, and the h1 tag has a font family of 'fascinate inline', a background image set as a linear gradient, and various WebKit properties to enhance the visual appearance.", "The URL for the background image is grabbed with a specific syntax, the padding is set to 0 and 20 pixels, and the display is set to flex with justify content set to 'sender'.", "The filter is set to 'drop-shadow' with specific values, the font size is set to 70 pixels, and the background clip and text-fill color are specified with various values to enhance the visual appearance."]}, {'end': 4799.756, 'start': 3989.117, 'title': 'Styling react components with typescript', 'summary': 'Demonstrates styling react components with typescript, including setting margins, padding, colors, and other styles, along with implementing optional chaining in typescript and building a quiz game with react and typescript.', 'duration': 810.639, 'highlights': ['Implementing various styles for components', 'Using optional chaining in TypeScript', 'Building a quiz game with React and TypeScript']}], 'duration': 1165.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/F2JCjVSZlG0/pics/F2JCjVSZlG03634392.jpg', 'highlights': ['The chapter covers setting global styling for the app and specific components with detailed CSS properties and values', "The font family is set to 'catamaran' with 'sans riff' as a fallback font, and the background image is a linear gradient with specific color values", "The p tag is styled with a color set to white, the score class has a font size of 2rem and a color set to white, and the h1 tag has a font family of 'fascinate inline'", "The URL for the background image is grabbed with a specific syntax, the padding is set to 0 and 20 pixels, and the display is set to flex with justify content set to 'sender'", 'Building a quiz game with React and TypeScript', 'Using optional chaining in TypeScript', "The filter is set to 'drop-shadow' with specific values, the font size is set to 70 pixels, and the background clip and text-fill color are specified with various values to enhance the visual appearance", 'Implementing various styles for components']}], 'highlights': ['Building a quiz app with React and TypeScript', 'Setting up application with TypeScript support', 'Securing the quiz by not exposing answers in client-side code', 'Creating event handlers for button clicks and mouse events', 'Creation of six states using useState', 'Usage of async await, fetch API, and JSON conversion', 'Start trivia function involves setting loading to true and game over to false', 'Displaying start button only when game is over or user has answered the last question', 'Setting global styling for the app and specific components with detailed CSS properties', "Setting font family to 'catamaran' with 'sans riff' as fallback font"]}