Quiz Master App for Wireless Buzzer App

 Quiz Master App

For Wireless Buzzer App

Methods:

• Connect your same database of Wireless Buzzer App with Quiz Master App.

• Import db in App.js

• We created a state in our App class Component which will hold the names of the teams which have pressed the buzzer button in an array.

• The structure of our database. Every team had two keys - ‘isButtonPressed’ and ‘timestamp’. We will use ‘isButtonPressed’ to identify if the team has pressed the button. Lets make an arrow function 'showTeamRanks()' for doing this.  

• Now we will read the value stored inside teams from our database. We need to get a database reference first then we need to create a listener which triggers a callback() function whenever the function is triggered.

• We will create a variable 'teamList' and store the values of database in it. Then we call the ‘showTeamRanks’ function inside the ‘componentDidMount’ so that it is called when the app loads.

• We will console teamList to check that the data is stored in teamList  or not.

• Now, first we will create an array named teams for storing the names of teams who pressed the button. Then we will write 'for loop' and inside it, an 'if condition' to store the names of the teams who pressed the button.

• To sort the team’s array according to their timestamp, there is a function which can help us sort it. ‘array.sort()’ can sort an array according to the rule we define. It takes a comparison function as an argument. It runs the comparison function repeatedly over the elements of the array until the array is completely sorted. Then we will console 'teams' to check that the data is stored in it or not.

• We will store teamName also with teams array.

• We wrote the code to update the state.

• We used the '.map()’ function to iterate through the state array.

• We added some inline style or we can use stylesheets.

• Now we will create an AppHeader.js file in Components folder for heading.

• Import AppHeader in App.js.

• Then we we call AppHeader inside render function and at the same time, we will create a 'Reset' button so that we can reset the database for a new game.

• We will style 'Reset' button.

• Now, we will create a 'resetBt' function to reset the database whenever the user presses the 'Reset' button.

• We will call 'resetBt' function when the user presses 'Reset' button.

• When the user presses the button repeatedly, the team name comes on the quiz master app repeatedly. This bug happens because we keep reading from the database and pushing the teams to the ‘teams’ array without emptying the array ever. The array then gets written to the state of the component. To fix this bug, we simply empty the array every time, our code will always read from the database again and there will be no duplicity entered in the array.  

Video: