Alex's Coding Journey

Quiz App Project

2nd project to learn and get better at back-end

Alex Gonzalez's photo
Alex Gonzalez
·

2 min read

It's been a little while since the last time I blogged. I injured my shoulder at the gym and have had to deal with some other stuff, but I have been doing my best to keep up with my projects. The latest project I completed was a quiz app. I wanted to learn how to manipulate dynamic information on HTML through JavaScript and this project taught me exactly that. The best way to learn how to code, is to actually BUILD PROJECTS.

Demo of Quiz App:

My biggest challenge through this project was learning how to take user input and make the code recognize whether or not it was correct or not and have it add time to the timer. Also, getting the questions and answers to change. Here's an example of the HTML and JavaScript that I used to help changing the information on the HTML.

 <section>
                <div class="question">
                    <!-- <span>What is HTML?</span> -->
                </div>
                <div class="answer-list">
                    <!-- <div class="answer">
                        <span>A type of aircraft</span>
                    </div>
                    <div class="answer">
                        <span>A made up abbreviation</span>
                    </div>
                    <div class="answer">
                        <span>Hypertext Markup Language used for building websites</span>
                    </div>
                    <div class="answer">
                        <span>None of the above</span>
                    </div> -->
                </div>
            </section>

<!-- I commented out the answers and question so I can use innerHTML to change
them using the classes -->

function getQuestions(index) {
  const question_text = document.querySelector(".question");

  let que =
    "<span>" +
    questions[index].numb +
    ". " +
    questions[index].question +
    "</span>";
  let option_tag =
    '<div class="answer">' +
    questions[index].answers[0] +
    "<span></span></div>" +
    '<div class="answer">' +
    questions[index].answers[1] +
    "<span></span></div>" +
    '<div class="answer">' +
    questions[index].answers[2] +
    "<span></span></div>" +
    '<div class="answer">' +
    questions[index].answers[3] +
    "<span></span></div>";
  question_text.innerHTML = que;
  options.innerHTML = option_tag;
  const ans = options.querySelectorAll(".answer");
  for (let i = 0; i < ans.length; i++) {
    ans[i].setAttribute("onclick", "answerSelected(this)");
  }
}

// This is the backend I used to grab the data stored in the q/a's and 
// and put them on HTML using the classes.

Huge shoutout to CodingNepal for the tutorial. The video helped me on key parts that I wasn't understanding. But that's what I love about coding. There's a community out there that has been through the same problems you have and have their solutions ready for you to look at.

May your code be clean, and your bugs be minimal !

Later!

backendQuizApp