quiz-app | Pulls questions in from a JSON file

Problem

I have deployed a Node.js/Express.js/Mongoose API to Heroku, however when I hit the endpoints I get a 503 status code and the Heroku prompt telling me there is an application error.

Attempts at a solution

I read on a different Stackoverflow post that you needed to add the MONGODB_URI as a config var in the settings of your Heroku app, so I added the connection string and changed the MongoDB connection to:

I thought this would be easy, but still can't find an easy solution. I simply want to set the page title (and document.title) to a specified string that I choose. I know I can access useLocation and get the current route, but that doesn't work with logical human naming. For example, my route might be /new but I want the title of the page to be 'Add New Thing'. Notice that I've added a new prop for the page title that seems like a logical place to add it (then use a useEffect to pull it), but can't figure out how to access this prop.

If this isn't the correct way, how would you do this? Should I instead setup a dictionary/lookup for the current url(useLocation) and assign a human page title?

Main goal: If someone DIRECTLY hits a URL '/new' how would you set the title?

My current structure is from a base create react app.

In my index.js

I'm making a React PWA which works fine on localhost to cache all the listed files but when I deploy the project on Netlify or any other platform it won't cache the files and is not working offline. The cache storage shows empty list which in case of localhost shows all the files I'm caching. The service worker file is being registered in both cases.

The link to my github repo is here: https://github.com/noumanmalik960/quiz-app-pwa

Here is service worker file code:

In my Angular quiz app, I had the same logic: option.selected && option.correct and option.selected && !option.correct in both of my question component (MultipleAnswerComponent and SingleAnswerComponent) templates, so I moved out the logic and added two variables to the QuizService to share/reduce the duplicate code:

I have added a dropdown with both numerical and percentage scores in my scoreboard score component, but the score doesn't seem to increase when a question is answered correctly, it just shows 0/4 or 0%. I'm including my code below and please could you see my Stackblitz and help to fix this issue. Thank you.

score template:

I have downloaded a simple Angular app from this demo. After using npm i and ng serve I keep getting this message. Been trying to fix it, figured i will get some help here, since i have not found any solution elsewhere. Same thing happens to every other component.

introduction.component.ts

I separated my quiz question form into two components, one for single-answer and one for multiple-answer, and now the answer(s) are not getting passed from the question components to the QuizComponent and also not getting pushed to the answers array.

This seems to be affecting the display of explanation text and scoring is not working.

Please could you see my Stackblitz: https://stackblitz.com/edit/angular-10-quiz-app and help to fix this issue. Thank you.

in question.component.html:

I am working on a quiz ResultsComponent using Angular 9, but having difficulty getting the results to display correctly in the mat-accordion with the data. I have a userAnswers array, correctAnswers array and a quizData.ts external file containing the quizData array object, and I am showing a summary of the results to the user, specifically "Your Answer(s)", "Correct Answer(s)", "Explanation" and "Elapsed Time" for each question in the quiz.

In testing the app, the user answer option number(s) sometimes do not seem to correspond with the correct option text; the same goes for the correct answers. In the multiple choice questions, options should be displayed as "1 and 2", not "1, 2" in the correct answers and explanation. I've passed the correct options string (with "1 and 2") to the ResultsComponent, but it should probably be an array of strings of correct options in case of several M/C questions. Also in testing, sometimes when the user answer and correct answer are different, the correct checkmark is shown, even when the user answer is not correct.

I am sharing a snippet of the code below, but you can view the entire quiz here: http://stackblitz.com/edit/angular-9-quiz-app. I would appreciate your help with these issues. Thank you.

EDIT: I need to use the Results model so that I can have:

I'm working on a quiz-selection component. I would like it to route to specific quiz based on quiz.id in QUIZ_DATA array in external quiz.ts file, for example TS-Quiz or DI-Quiz. When I click on the TypeScript Quiz (TS-Quiz), I am getting the DI-Quiz intro; it should be the TS-Quiz intro information. Not sure how to use the quiz.id type that is passed to the IntroductionComponent in [routerLink].

And I'm getting this error when loading the first question in the quiz: TypeError: Cannot read property '0' of undefined

I would like it so that the select page is first (done), followed by intro (based on quiz.id), then questions (based on quiz.id), then results.

Please see my running app on Stackblitz: https://stackblitz.com/edit/angular-10-quiz-app

My [routerLink] is below: