Object oriented programming with Javascript - Build Quiz App

[OOPs] Build Randomized Quiz App with Timer - Front End Web App Development - Hands-on training - Build app from scratch

4.85 (61 reviews)
Udemy
platform
English
language
Web Development
category
Object oriented programming with Javascript - Build Quiz App
792
students
8 hours
content
Nov 2021
last update
$64.99
regular price

What you will learn

Understand the basics of HTML5 & CSS (I'll explain the concepts as we code the project)

Understand the basics of Javascript (we have separate modules for this topics)

Understand how object oriented programming works in building real world applicationss

Build a completely dynamic real world quiz app with Javascript, HTML5 and CSS3 with a randomized question pulling feature

Build a fully featured timer for your quiz

Build a colored answer tracker for your quiz

Know how front end web app development works by building this project

Improve your logical problem solving skills

Create step by step algorithms for projects before turning them into codes

Improve your front end design and development skills

Create HTML5 skeletons of web applications

Design web applications with various CSS styling concepts

Make web applications work with Javascript concepts

Get a foundation in Object oriented programming concepts with Javascript

Why take this course?

Practice makes perfect.

Start your journey into becoming a professional front end web developer here!

Learn how to create a real world Object Oriented programming based Dynamic Quiz app with Timer!

At DigiFisk, we like making learning fun. Our courses are interactive and fun with a ton of practical elements to it. We've decided to take it a step further with our Front end Web app development practice series. 

Once you learn the syntax of a programming language, the next logical step is to start creating software and apps. But that's where most students get stuck. Problem solving isn't as easy as learning a bunch of syntaxes. 

But we aim to make it easy for you. We also aim to teach you intermediate programming topics like object oriented programming while at it.


What will you learn in this course? 

In this course, you'll learn how to build your Randomized Dynamic Quiz App with Timer & Answer Trackers from the ground up with just HTML5, Javascript and CSSS and Object Oriented programming concepts  in just a couple of hours

You'll learn:

1. How to create the HTML5 structures of this app. 

2. How to make the app pretty with CSS (design, design, design!)  

3. How to make the app work (draw on the canvas) with logic and algorithm, i.e Javascript 

4. Basic concepts of Javascript and Object oriented programming (concepts related to this project). 

5. How object oriented programming works in building real world applications

6. How to build a completely dynamic real world quiz app with Javascript, HTML5 and CSS3 with a randomized question pulling feature.

7. How to build a fully featured timer for your quiz app.

8. How to build a colored answer tracker for your quiz.

9. Logical problem solving skills

By the end of the course, you'll be one step closer to creating front end web apps like a pro. You could even try creating other  web apps and games from the concepts you learn in this course. 


How is this course designed? 

I've made this course as easy to understand as possible. I've structured it in such a way that each section will handle one of the 3 languages covered here. 

Introduction: This is where I'll explain how the app works, it's various features and what we'll be using to achieve the same results. 

Module 1: We'll be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our app, devoid any colors or design elements. 

Module 2: Here, we'll "beautify" our app. We'll be using CSS elements to give our app colors and styles. At the end of this module, we'll have a Quiz App app that'll look like the final result, albeit one that does not work yet. We'll cover that in the Javascript module.  

Module 3: We'll be covering some basic concepts of Javascript in this module.  We'll also be adding lectures on object oriented programming with Javascript (creating and using objects with Javascript). We'll only cover concepts that we'll need for our app's Javascript code though. If you already know the basics, you can skip this module. 

Module 4: This would be the meat of the course. We'll be delving into Javascript & Object oriented programming code of our app in this module, and We'll teach you how to make the app work (make the quiz, the tracker, the randomized question feature and the timer work) in here. 

Final section: Finally, We'll give you some ideas on how to improve/enhance the app further and make it your own in terms of design and functionalities. 


This course is for you if:

1. If you like learning by doing rather than hours of boring theoretical lectures. 

2. If you're a complete newbie to the world of web development, or just programming in general, and would like to start creating software with the help of a beginner-friendly course. You'll learn the basics of everything used in this project (HTM5, CSS3, Javascript, HTML canvas).  I'll be explaining every single line of code I'll be using in this course, so you won't feel lost.

3. If you have the passion for programming, and if you know the basics of HTML5 and CSS3, but you're stuck on the practical aspects of it. Turn your theoretical knowledge into practical knowledge with our course. 

4. Do you want to get into real world programming and object oriented programming? This course will take you a couple steps further in the right direction.

5. If you want to delve into the exciting world of front end web app development, this course will take you a couple steps further in the right direction.

6. If you're a Javascript web developer who just wants to try out a new project. Our course welcomes coders of every level, from absolute beginners, to pros.​

7. If you know the theoretical concepts of Javascript but would like to learn how to apply your knowledge in the real world.

8. If you want to add a real-world project to your resume - to get a promotion or find a new job

9. If you want to pad your portfolio with a cool project to bag more freelance web development projects.


So, what are you waiting for? Get this course today, and begin your journey into the wonderful world of front end web app development and object oriented programming!


Content

Introduction

Introduction

HTML5 Building Blocks of the App

Setting up the HTML page skeleton and title
Setting up the Meta information for the app
Create the app's header
HTML code for the quiz's trackers
Set up the quiz section - Question, Option buttons & Next question button
Footer for the app - Progress bar and Timer
HTML code for the app

Styling the Quiz app - achieving the final look

Setting up and linking the CSS stylesheet
Basics of CSS selectors and properties
Default styling options for the app
Background colors, and more on applying colors in CSS
Design the quiz box
Design the quiz box - part 2
Design the header of the app
Give the base design for the trackers
Design the question and options area - part 1
Design the question and options area - part 2
Design the Next Question button
Design the footer - progress area and timer
Design the result area - score and retake button
CSS code for the app

[OPTIONAL] Javascript & OOPs Basic Concepts (related to this project)

Connecting HTML and script/JS files
An introduction to variables and assigning values
Mathematical operators and alerts
Conditional statements - if else statement
Conditional statements - Switch case
Loops - For loop
Arrays - 1 dimensional arrays
Arrays - 2 dimensional arrays
An introduction to functions (function definition and calls)
Intro to DOM - getElementById and InnerText
Intro to DOM - adding click events to buttons
More Event listeners Part 1
More Event listeners Part 2
Objects oriented programming with Javascript - part 1
Objects oriented programming with Javascript - part 2
Objects oriented programming with Javascript - part 3

Javascript code for the app - Making the app work

Creating and linking the scripts
Creating the question bank in the form of objects
Step by step algorithm for the Javascript code of the app
Create and initialize the variables
Retrieve the necessary HTML elements to manipulate them later
Initialize more variables
Function that sets the random question and options in the app
Function that updates the progress bar with each question
Function that changes the option buttons to their default color
Get question function - consolidates and calls the mini functions
Functions to change tracker colors, calculate final score & set result page
Generate a unique random number to call a random question/answer set
Generate a unique random number to call a random question/answer set - part 2
Make the timer work - part 1
Make the timer work - part 2
Make the timer work - part 3
Make the option selection work
Make the next question button work - check and load next question
Consolidate everything and make the app work on refresh
Check the output and correct bugs
Javascript code for the app
Complete code (downloadable) for the Quiz app

Conclusion & Feature ideas

New features that you can try to create for this game
Conclusion & Bonus - Continue your journey

Reviews

Nicolas
May 1, 2022
Hi guys, I gotta say that this course is amazing, thanks Aarthi! : ) Usually I'm more into listening "guys" courses but Aarthi doesn't make it "too girlie" like so many, her smooth voice reaches men and women the same way to me. And I need to listen to her, it's been my biggest project (in JS) for now so I just listened carefully what she had to say but now I need to get back to it and code along as Aarthi says and she's 100% right about that, looking forward to it : ) I mean, great course, great project, she explains everything with a sweet, smooth voice (I love when she ends the video with her classic "I'll see you in the next video, thank you" with a higher-pitched tone which is so cute in every course, I have several of them, the calculator project was awesome too, so much fun I had : ) Just go for it, you won't regret it, fabulous course, no question, worth 100 times the price!
Sandor
February 7, 2022
I had some lessons before.. I managed throe, but if I someone who was never touched this subject, I'm not shore I would be able to get it.. It would be nice to find a cores where someone would teach step by step every little details.. Thank you..
Vladan
October 25, 2021
Perfectly explained Quiz app. I recommend it to beginners all everyone who wants to improve problem solving skills.
Bob
July 30, 2021
This was the perfect course for me. I had some familiarity with HTML/CSS so this was a good review. I did not know Javascript but I have programed in Java and Python. So this course taught my javascript and how to interact with the HTML. Lastly, I need to create a quiz for a project I am working on although not exactly like this with the options. So then, this was just the course I needed.
Xavier
May 14, 2020
Good project. A lot of material is taught in this course. I really appreciate the teacher's style. She explained everything she did. Why only 4 stars though? Some choices she made for structuring the code seem weird. Why testing whether a botton is clicked using its color (that is bad practice) instead of saving the rank of the botton selected? If you want to change the number of questions or the number of different answers, you have to go through the whole code and modify a lot of lines of code because the structure is not adapted. It leads to too many repetitions as well. However these are details. We learned a lot about how to deal with the DOM using javascript in this course.
Linas
May 14, 2020
I'm giving a firm 1 star rating for this course. First of all, an old and outdated JavaScript syntax is used in this course, which is not advisable to practice these days. If the course is not updated, then it's better it is deleted. Second, there are a several code practices she's teaching you to use, which is considered harmful in professional coding and thus, it's better to avoid them. Third, it is stated in the course overview that the course is based on OOP. That's a lie. There is no Object Oriented Programming in this course. It could have been if she at least had stored the variables in object literals and brought the practices of prototypical inheritance, but there is no such things in this course. The code is a bunch of messy functions. Fourth, the teacher is not too eloquent. Her explanations are vague and shallow. She constantly rushes and jumping from one thought to another, frequently repeating same phrases.
Rita
January 28, 2020
This teacher explaned very well the concepts javascript. in the future i suggest that she can be the question with carroussel.
Ugochukwu
May 3, 2019
This course made me understand the basics of how a computer based test (CBT) app or quiz app is being built (but its slightly different). This was a great course for me. But in-depth explanation for absolute beginners should be made, Like writing and running the code in bits and explaining your approach.
Bidhan
January 14, 2019
Excellent course for the concept of the Object-Oriented Programming. Very good explanation for the CSS. It is a little bit advanced for the absolute beginner for sure but I have enjoyed and learned a lot even though I am very new to the JavaScript programming. I have attracted to this course due to the OOPS subject matter. She explains all of the functionalities of the app very clearly.
Max
November 20, 2018
The course was well planned and delivered. It is very practical but also explains the HTML, CSS and JavaScript concepts very well. Perhaps the 10 red circles could have been omitted and replaced with just a score counter. After 10 questions we can then have a review and result page showing the questions and correct answers with the total score. We can then choose to replay the quiz. Nevertheless, it is a very good course worth 5 stars.
KiangTzu
October 19, 2018
This course is amazing! I had another course previous, covering almost the same aspect and by a very talented teacher but this make everything stick into my head in a very light and joyful way. Thank'you very much even for the sound of your voice :) .-- KiangTzu
Joe
October 8, 2018
Awesome course. Girl I really learn how everything works together. HTML, CSS, and Javascript. Keep on making more super courses. Thanks
Cyrus
October 7, 2018
This is just so great! Very well explained, easy to understand, informative, very well organized. There is so much value to gain from this experience. Thank you Aarthi Elumalai for such a great course.

Charts

Price

Object oriented programming with Javascript - Build Quiz App - Price chart

Rating

Object oriented programming with Javascript - Build Quiz App - Ratings chart

Enrollment distribution

Object oriented programming with Javascript - Build Quiz App - Distribution chart
1299726
udemy ID
7/21/2017
course created date
11/20/2019
course indexed date
Bot
course submited by