My survey form consists of 13 questions, all displayed on one page. However, I would like to only show 3 questions at a time and then have the next set of 3 questions appear on the following page.
I am not sure how to accomplish this. Any assistance would be greatly appreciated. Thank you.
This script is designed to display only three items at a time and reveal the next set of three items when the Next Button is clicked.
let currentPage = 0;
const pages = 5;
const itemsPerPage = 3;
const $submitButton = $("button[type=submit]");
$("li h3").each(function(index, element){
$(element).text((index + 1) + ") " + $(element).text());
});
$("#next").click(function() {
$("li")
//.css("background", "#FFF")
.hide();
for(let i = 1; i <= itemsPerPage; i++) {
$("li:nth-child(" + ((currentPage * itemsPerPage) + i) + ")")
//.css("background" , "red")
.show();
}
if(currentPage === pages - 1) {
$submitButton.show();
} else {
$submitButton.hide();
}
if(currentPage < pages - 1) {
currentPage += 1;
} else {
currentPage = 0;
}
});
$("#next").click();
Utilizing CSS checked selector Setting up tab containers Please place the input just before the div container
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8" />
<title>Tabs</title>
<style type="text/css">
input:checked + div {display:block;}
.nod{display: none;}
label{display:inline-grid; border: solid 2px black; }
</style>
</head>
<body>
<p>Choose a section</p>
<label for="select1">Section 1</label>
<label for="select2">Section 2</label>
<label for="select3">Section 3</label>
<input type="radio" name="tab" id="select1" class="nod" checked="checked" />
<div id="tab1" class="nod">Text of 1<br />bla bla bla ...</div>
<input type="radio" name="tab" id="select2" class="nod" />
<div id="tab2" class="nod">Text of 2<br />ipsem something</div>
<input type="radio" name="tab" id="select3" class="nod" />
<div id="tab3" class="nod">Text of 3<br />Eat that you can and can that you cannot</div>
</body>
</html>
As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...
This is a snippet of JavaScript code $(document).ready(function () { $(".show-content").hide(); $(".opener").click(function () { $(this).parent().next(".show-content").slideToggle(); return false; ...
Can someone please assist me with displaying the full image of a small image located in the gallery? Whenever I try to scale the display, the Modal automatically resizes but the image does not resize accordingly. The image ends up overlapping when scaling ...
I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...
As I loop through my list of students and add them to my page, I encounter an issue where each student's unique ID is not being passed correctly. When the getStudentInfo function is called, it always returns the ID of student1, regardless of which stu ...
Currently, I am working on creating a layout that combines the automatic sizing feature of flexbox with fixed-size elements: <View style={{ height: 70, alignItems: "center" }}> <Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}&g ...
Currently, I am refactoring a form in react and planning to offload most of the state and logic to the parent component. This decision is made because the parent's state will be updated based on the form submission results. However, I encountered an i ...
I am facing a challenge with my controller code, which appears to be quite simple. Here is a snippet of the controller: timeInOut.controller('timeInOutController', function($scope, $filter, $ionicScrollDelegate){ ... }); However, when at ...
My current project involves using loopback where I have a MyUser model that is related (hasMany) to a SellerRequests model. After discovering that I can create a new seller request linked to the user by making a POST request to /api/MyUsers/:id/sellerRequ ...
I'm currently working on customizing a plugin for including input tags, which can be found here Below is a simplified version of my problem. The plugin scans the page for any HTML elements with the 'tags-input' class and creates functions t ...
I have a simple component structured like this: <div onClick={toggleHidden} className="faq-item-header"> <h3>What is Bookmark?</h3> <img src={iconArrow} alt="arrow" /> </div> https://i.sstatic.net/LdWXs. ...
I seem to be missing something as I can't seem to find a solution for this particular issue. I have implemented custom checkboxes on a list of sentences. Initially, they appear fine, but once you check the first checkbox, it shifts its position. I am ...
I encountered an issue when attempting to execute a JavaScript function within an Angular function. The error I am facing specifically mentions that the indexof and search functions are not functioning properly. <select class="form-control input-sm in ...
An unusual challenge has emerged while rendering data on a Next.js page in my application. Here's the scenario: I've created a Next.js page that showcases customer details based on a query parameter called cid. The page retrieves customer data an ...
Can X number of elements (h1, p, span...) be modified only if they have a specific class? I'm searching for a solution like this: (elem1, elem2, elem3, elem4).class { /* add customization here */ } I previously attempted using parentheses, curly b ...
Looking at my Angular 2 component: import { Component, ElementRef, Renderer } from '@angular/core';; @Component({ selector: 'my-button', templateUrl: 'button.html' }) export class ButtonComponent { private text: string ...
I've run into an issue where I'm attempting to invoke a service in Angular within a for loop and store the result in a Map. map = new Map<string, string[]>(); this.effectivitiesList = this.trimEffectivities.split(","); for (let ...
Is there a way to adjust the following code to ensure the Unicode character with HTML code ◼ prints in red in both Firefox and Edge browsers? Currently, it displays in red in Firefox but in black in Edge. <html> <body> <span style=" ...
I have exhausted all possible methods to retrieve the data, but I am unable to solve this puzzle. The information is organized in a format like the following: [{"code":1000,"day":"Sunny","night":"Clear","icon":113,"languages": [{"lang_name":"Arabic","lan ...
Using document.body.innerHTML allows you to search within the body of a webpage. Is there an equivalent method for searching within the "Head" section? I've been looking around but so far, I haven't come across any such function. ...