Utilize text instead of visual aids - Engaging javascript trivia game

I have successfully implemented a 10-question trivia game with a timer in html, javascript, and css. The game currently displays images from a folder and offers 4 answer options.

However, I am looking to switch from using images to serving text-based questions instead. Can you provide guidance on making this change?

I have made significant modifications to the css and html code (and some to the js) to streamline and simplify it, drawing inspiration from codepen and various online sources. While my css and html skills have improved, my knowledge of javascript is still limited.

(function() {
  // JavaScript code begins here
}());
*,
*:after,
*:before {
  // CSS styling properties go here
}
<div class="container">
  <div class="wrapper">
    <!-- HTML structure for the quiz layout -->
  </div>
</div>

javascripthtmlcss

Answer №1

To modify the content, simply replace the <img> tag with a <p> tag and update the question text inside the questions variable. Next, adjust the following 2 lines:

      const imageElement = document.getElementById("question-placement");
      imageElement.src = `./assets/images/${questions[questionIndex].image}.png`;

with these 2 lines:

      const textElement = document.getElementById("question-placement");
      textElement.innerHTML = questions[questionIndex].text;

The process is quite straightforward.

(function() { const playButton = ... ... }).();
...

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

Receiving successful ajax responses and populating text fields with the returned values

I have been attempting to populate the values from an AJAX success response into their corresponding fields, but I am encountering some difficulties. Despite receiving the desired data in the "alert(responseObject)" within the success section, I am unable ...

javascriptajax

Vanilla JavaScript // Conceal a div when the class of another div is modified

Note: I am unable to utilize jQuery, only vanilla JavaScript I am not very proficient in pure JS. Additionally, this time around, I cannot rely on any external resources such as jQuery. What I am looking for: If the div1 class is active, I want to hide ...

javascripttriggersshow-hide

Ways to show a corresponding number beneath every image that is generated dynamically

I have a requirement to show a specific image multiple times based on user input. I have achieved this functionality successfully. However, I now need to display a number below each image. For example, if the user enters '4', there should be 4 im ...

javascripthtml

Clicking on a button in the Angular framework results in a change

I am faced with a scenario where an input value is received from another component: <input [value]="myInput.something"> <span (click)="incrementPlus()">+</span> What I need is a straightforward function that c ...

javascriptangulartypescriptinputincrement

Implementing a box-shadow effect on a particular navigation item

I'm currently working on my own website and I've run into a roadblock with the menu design. Here's how it looks right now. https://i.sstatic.net/8kINJ.png Everything is looking great except for one issue! I'm attempting to add a box-s ...

htmlcss

Display the selected tab or menu option as the highlighted element using JavaScript

This is not a jQuery inquiry. I am utilizing neither an <anchor> nor a list for my menu structure. My goal is to have the tab item in the menu appear in a different color when it is active. CSS pseudo-classes such as :active and :selection did not yi ...

javascripthtmlcss

An effective way to eliminate or verify duplicate dates within an array in AngularJS1 is by employing the push() and indexOf() methods

I have successfully pulled EPOCH dates and converted them into strings, but my previous code did not check or remove duplicates. Does anyone have any suggestions on what I can add to accomplish this? The timestamp in this case is the EPOCH date that I re ...

javascriptangularjsduplicatesindexofepoch

How can I delay the loading of a link until the pop-up is closed?

I have successfully implemented a pop-up on my website, but I am facing an issue where I need to prevent any linked pages from loading until the visitor clicks on the accept button. However, I am struggling to make it function as intended. Below is the sn ...

javascripthtmlcss

There is no delete .catch command available in axios for void operations

I have attempted to utilize an axios .delete request in order to remove cards from a list. The code for the delete function looks like this: deleteProduct(id: any) { const { adminhelpcard } = this.state; const apiVideoUrl = `http://localhost:300 ...

javascriptreactjstypescript

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

htmlcss

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

I am currently using scss files and I want to adjust the breakpoints within the css code in vuetify version 2. Unfortunately, I have not been able to locate any information regarding this in the vuetify upgrade guide. In the previous version 1.5, I utili ...

cssvue.jssassvuetify.js

Encountering issues with configuring an Express server with HTTPS

Having difficulty setting up my Express server on HTTPS and accessing my API. Below is the code I am using: // server.js const express = require('express'); const { readFileSync } = require('fs'); const https = require('https' ...

javascriptnode.jsexpresshttps

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

javascriptjqueryhtmlcss

Is there a way to extract the data types of my model's properties from the Prisma Schema?

If we consider the following Prisma Schema example: model User { id String @id @unique @default(dbgenerated("gen_random_uuid()")) @db.Uuid email String @unique username String } Is there a way to extract t ...

javascriptnode.jsprisma

Order a collection of items in a 2D array using JavaScript

In my game, there is a inventory system that allows players to automatically sort items based on name, quantity, and type. // Setting up the Inventory grid var InventoryWidth = 2; var InventoryHeight = 4; var Inventory = new Array(InventoryWidth); for ...

javascriptarrayssorting

What causes the exception in JavaScript to be an empty object?

try { let temporary = null; temporary.split(','); } catch (error) { Logger().info('caught error: ', error, error.constructor); } output: caught error: {} undefined I attempted to use JSON.stringify and encountered the sa ...

javascriptnode.jstypescriptexceptionerror-handling

Displaying dynamic SVG with AngularJS

Trying to generate an SVG based on data from the scope, but encountering issues with rendering - it comes out empty or displays 'NaN' for some unknown reason. https://i.sstatic.net/vO70i.png Additionally, errors are popping up right after the r ...

javascriptangularjssvg

Issues with forms displaying as raw text within Laravel 5

I recently entered the realm of Laravel. While following a tutorial on OpenClassrooms, I encountered some challenges as the tutorial was for Laravel 4 and I am using Laravel 5. After struggling to adapt my controllers and resolve namespace dependency erro ...

phphtmlformslaraveltext

Declaring an array that holds Angular components in Angular 11: What's the best approach?

I'm trying to implement a feature in my Angular component where I can create a list that displays content from other components. My current approach involves declaring an array that contains references to different Angular components: import { Compone ...

htmlangulartypescript

How can I use Vue to close the side Navbar by targeting the body tag and clicking anywhere on the screen?

I am looking to make a change in the Navbar position by moving it right: -500px (to close the navbar) when clicking anywhere on the window. In HTML and JS, I can achieve this by targeting the body tag. How can I accomplish this in Vue? I already have funct ...

javascriptvue.js