Progress bar display not available

I have recently developed a JavaScript quiz application and included a progress bar feature. While it works flawlessly offline on my laptop, I encountered an issue when uploading the files to Codepen.io - the progress bar fails to display.

I would appreciate it if someone could help me identify where I might be going wrong.

Below is the code snippet:

var allQuestions = [
{
question: "Before Mt. Everest was discovered, which mountain was considered to be the highest mountain in the world?",
choices: ["Mt. Kilimanjaro", "Kanchenjunga", "Mount Everest"],
correctAnswer:1
},

{
question: "Does England have a 4th of July?",
choices: ["Yes","No","I don't know"],
correctAnswer:0
},
// Remaining quiz questions and answers
// ...
// Additional CSS and HTML code provided // ...

Aside from the issue on Codepen.io, I also have a few other concerns not related to the platform:

  1. The "Quiz" heading does not adapt well to different screen sizes. Any suggestions on how to make it responsive?

  2. The alignment of text options with the radio buttons is slightly off. How can I adjust this?

  3. When transitioning between questions, the webpage's positioning seems to shift. Is there a way to maintain consistency?

javascriptjqueryhtmlcssjquery-ui

Answer №1

Issue with displaying progress bar

The height property on .progress-bar seems to be causing the problem.

  1. The title "Quiz" doesn't adjust properly to different screen sizes. How can this be resolved?

To make the font size responsive to the viewport, you can use a viewport unit. Try using 16.7vw, which is similar to the value you currently have set at 15em.

For further details, refer to this related question.

Check which Browsers support the viewport units.

  1. The text alignment with the radio buttons is not perfect. How can this be adjusted?

If you don't want the text to be centered, you might need to realign it accordingly. Could you provide more details on your desired alignment?

  1. Is there a way to prevent the webpage from scrolling to the top when transitioning between questions?

To avoid the page jumping to the top when moving to the next question, you can prevent the default action using event.preventDefault(); in the "next" button's click event.

Updated CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever my code is used within Google Sites, it triggers the opening of a new and empty tab

When using this code inside an HTML box in Google Sites, a problem arises. It seems to work perfectly fine in Internet Explorer and Chrome when saved to an HTML file. However, within Google Sites, it unexpectedly opens a new tab with no data. The code st ...

javascriptjqueryhtml

How to set up 'ng serve' command in Angular to automatically open a private browsing window?

I am looking for a way to open my project in an Incognito Mode browser without storing any cache. Is there a specific Angular CLI flag that can be included in the ng serve -o command or in the Angular CLI configuration file to enable opening a browser in ...

javascriptangularangular-cli-v7

Utilizing a Buefy element without Vue.js integration

Is there a way to generate a Buefy notification without utilizing a Vue component? Specifically, I'm attempting to implement a Buefy notification within the axios interceptor below: import axios from "axios"; import { Notification } from "buefy/dist/ ...

javascriptvue.jsbuefy

React unable to properly render Array Map method

I am currently working on a project using ChakraUI and React to display a list of team members as cards. However, I am facing an issue where only the text "Team Members" is being displayed on the website, and not the actual mapped array of team members. Ca ...

javascriptreactjschakra-ui

What is the best way to increment the value of an input by any number using JavaScript and HTML?

My code is causing a NaN error, and I'm struggling to identify the root cause. Even providing a specific number in the addnum function did not resolve the issue. <script> var result = document.getElementById("result"); var inputVal = ...

javascripthtml

Is there a way to connect a CSS external file that is saved on Dropbox?

Is it possible to link an external CSS file stored in Dropbox with HTML? I have followed all the instructions I could find online, including clicking and pressing "Copy Dropbox Link" to generate an href link. However, it doesn't seem to be working. ...

htmlcssdropbox

The tag (p) is not located in a valid position

I am currently working with the following code snippet: <p class="pHelp"> xxxxx <a href="#components">Form components</a> yyyyy </p> This particular line is located within a long chain of nested HTML tags inside html/body/a/a/a/a/ ...

htmleclipsetags

"Uncovering the parent element with jQuery: A step-by-step guide

I need help increasing the font size of a parent element without affecting the entire body's font size. How can I achieve this? For example, with the id="vs-1", I want to increase the font size of the grandparent li text here which is "1940". $("li ...

javascriptjquerycss

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

javascriptjquerycssasp.net-mvcasp.net-ajax

What causes data to update in a Vue template but not in the JavaScript portion of the code?

The topic in the template section updates when its value in the parent component changes, however, the same value in the script part remains the initial value it received at search_params.set('param1', this.topic);. Everything else in the code is ...

javascriptvue.jscomponentsprop

Determine the total number of active links on an HTML webpage using F#

Currently, I am working on developing a basic F# function that will be able to count the total number of links present in a given HTML website URL. I understand that this can potentially be achieved by counting the occurrences of the "<a" substrings, b ...

htmlwebweb-scrapingf#substring

What is the best way to delete the text following the last "/" in location.href with the help of

I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...

htmljquerywordpress

Dealing with the Token Mismatch Issue in AJAX Requests with Laravel 5

I am having trouble creating an AJAX call in Laravel 5. Every time I try, I encounter a TokenMismatchException but I can't figure out the reason why. This is my AJAX code: $(document).ready(function() { $("#send").click(function() { ...

phpjqueryajaxlaravellaravel-5

React's constructor being invoked twice

As a newcomer to react, I am in the process of developing a simple web application but encountering an issue. It seems like my Constructor is being called twice when I load a class component. Can anyone provide some assistance? Home.js import React from ...

javascriptreactjs

Refreshing a page following an AJAX request made with jQuery

I am working on a JSP page that shows student details. When a student is selected from the dropdown box, it triggers an onchange event to retrieve the minimum and maximum marks for that student. <form name="listBean"> <c:forEach var="Item" i ...

javascriptjqueryajax

Using the Grails asset-pipeline with an external JavaScript library

In transitioning from Grails 2 to Grails 3, I am facing the challenge of managing my JavaScript files with the asset-pipeline plugin. The issue lies in using external libraries such as globalize and ajax-solr, which are large and consist of multiple interd ...

javascriptjquerygrailsasset-pipeline

Error encountered while attempting to display a view when pressing TouchableOpacity in a React Native application

Having trouble rendering a view when pressing on a TouchableOpacity in my React Native app. Any suggestions for a solution? import React, { Component } from 'react'; import { AppRegistry, View, TouchableOpacity } from 'react-nati ...

javascriptreactjsreact-native

What is the best way to eliminate the initial key from a JSON object

How can I remove the first index in a JSON object? JSON: {"data":[{"label":"Data","data":1},{"label":"Website","data":1}]} I need: [{"label":"Data","data":1},{"label":"Website","data":1}] When I try to delete .data, it outputs object{} JavaScript c ...

javascriptjson

What could be causing my webpage content to be partially hidden by my CSS menu?

I am currently working on my website which features a CSS menu with my website logo, a text box, and a dropdown. Additionally, I have created a login form using a table like the one shown below. <p>&nbsp;</p><table width="40%" border="0 ...

htmlcss

The Access-Control-Allow-Origin CORS header does not align with the null value on the Ajax request

Encountering the same issue in my browser Cross-Origin Request Blocked: The Same Origin Policy prevents access to the remote resource at http://abc-test123.com/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘(null)’). My ...

javascriptphpajaxapicross-platform