Best Moments :
Hi all i work with quiz module,
So the issues are, I have dynamically generated data from an array, this is the data i present to the view, this is working good.
I have left tabs, which are built and depends on the length of the questions.
So I need to show in the page first 10 tabs with questions, these are done.
When I press the button Next question it's going to next question, but in case if questions more the 10, it's not to change view to next 10, in case if I change view manually use button ">" it's showing new view, but when i press button Next question it's starting from the beginning =(
with this function i sort the li element in page:
function sortTabs() {
var $lis = $("#left-tabs li").hide();
$lis.slice(0, 10).show();
var size_li = $lis.length;
var x = 10,
start = 0;
console.log(start, x , size_li)
$('.nex-ten').click(function () {
if (start + x < size_li) {
$lis.slice(start, start + x).hide();
start += x;
$lis.slice(start, start + x).show();
}
});
$('.prev-ten').click(function () {
if (start - x >= 0) {
$lis.slice(start, start + x).hide();
start -= x;
$lis.slice(start, start + x).show();
}
});
}
xdeepakv :
Instead of building such a complex view and then working with it. You can play with data. Since you are showing only 10 data at a time. You can just build only 10 rows at a time. It will optimize your UI too. Else system dies. Here are some sample methods. You can optimize it accordingly.
Find the update code pen:
https://codepen.io/deepakshrma/pen/jOPWbKW
Smaple:
const onNext = () => {
pageInfo.curr = pageInfo.curr + 1;
if (pageInfo.curr >= pageInfo.limit) {
pageInfo.page = pageInfo.page + 1;
pageInfo.curr = pageInfo.curr - 10;
if (pageInfo.page > PAGE_COUNT) {
pageInfo.page = 0;
pageInfo.curr = 0;
}
}
console.log(pageInfo);
};
// app.js
var allQuestions = [
{
question:
'Who said, "My real father lost his head at Kings Landing. I made a choice, and I chose wrong."',
choices: [
"Robb Stark",
"Jon Snow",
"Theon Greyjoy",
"Arya Stark",
"Arya Stark",
"Arya Stark",
"Arya Stark"
],
answer: "Jon Snow",
image: "https://www.w3schools.com/howto/img_mountains.jpg"
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "What is Daenerys Targaryens brothers name?",
choices: ["Varys", "Viserys", "Aerys", "Aegon"],
answer: 1,
image: ""
},
{
question: "What is a big fear of the Dothraki?",
choices: ["Fire", "Salt water", "Heavy stone", "Crows"],
answer: 1,
image: ""
},
{
question: "How many swords make up the Iron Throne?",
choices: ["500", "1000", "2000", "5000"],
answer: 1,
image: ""
},
{
question: "What were Jon Arryn's final words?",
choices: [
"Winter is coming",
"Beware of the white walkers",
"The seed is strong",
"Beware the dwarf"
],
answer: 2,
image: ""
},
{
question: "Who built the Iron Throne?",
choices: [
"Aerys the Mad King",
"Aegon The Unlikely",
"Aegon the Conqueror",
"Aegon the Destroyer"
],
answer: 2,
image: ""
},
{
question: "Which knight takes a lance through the neck while jousting?",
choices: [
"Ser Hugh of the Vale",
"Ser Barristan Selmy",
"Ser Ilyn Payne",
"Ser Gregor Clegane"
],
answer: 0,
image: ""
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "Who built the Iron Throne?",
choices: [
"Aerys the Mad King",
"Aegon The Unlikely",
"Aegon the Conqueror",
"Aegon the Destroyer"
],
answer: 2,
image: ""
},
{
question: "Which knight takes a lance through the neck while jousting?",
choices: [
"Ser Hugh of the Vale",
"Ser Barristan Selmy",
"Ser Ilyn Payne",
"Ser Gregor Clegane"
],
answer: 0,
image: ""
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "Who built the Iron Throne?",
choices: [
"Aerys the Mad King",
"Aegon The Unlikely",
"Aegon the Conqueror",
"Aegon the Destroyer"
],
answer: 2,
image: ""
},
{
question: "Which knight takes a lance through the neck while jousting?",
choices: [
"Ser Hugh of the Vale",
"Ser Barristan Selmy",
"Ser Ilyn Payne",
"Ser Gregor Clegane"
],
answer: 0,
image: ""
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "Who built the Iron Throne?",
choices: [
"Aerys the Mad King",
"Aegon The Unlikely",
"Aegon the Conqueror",
"Aegon the Destroyer"
],
answer: 2,
image: ""
},
{
question: "Which knight takes a lance through the neck while jousting?",
choices: [
"Ser Hugh of the Vale",
"Ser Barristan Selmy",
"Ser Ilyn Payne",
"Ser Gregor Clegane"
],
answer: 0,
image: ""
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
},
{
question: "What does Valar Morghulis mean?",
choices: [
"All men must die",
"What is dead may never die",
"Never say never",
"All men must first live",
"Robb Stark",
"Jon Snow",
"Theon Greyjoy"
],
answer: "All men must die",
image:
"https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
},
{
question:
"Which GOT character played Hermoine Granger's mom in Harry Potter?",
choices: ["Melisandre", "Alerie Tyrell"],
answer: "Melisandre",
image:
"https://media.gettyimages.com/photos/beautiful-book-picture-id865109088?s=612x612"
},
{
question:
'Who said, "You knelt as boys, now rise as men of the Nights Watch."?',
choices: [
"Maester Aemon",
"Eddard Stark",
"Jeor Mormont",
"Alliser Thorne"
],
answer: "Maester Aemon",
image: "https://tinypng.com/images/social/website.jpg"
}
];
let pageInfo = {
curr: 0,
page: 0,
limit: 10,
total: allQuestions.length
};
const PAGE_COUNT = Math.round(pageInfo.total / pageInfo.limit - 1);
const onNext = () => {
pageInfo.curr = pageInfo.curr + 1;
if (pageInfo.curr >= pageInfo.limit) {
pageInfo.page = pageInfo.page + 1;
pageInfo.curr = pageInfo.curr - 10;
if (pageInfo.page > PAGE_COUNT) {
pageInfo.page = 0;
pageInfo.curr = 0;
}
}
console.log(pageInfo);
};
const onPrev = () => {
pageInfo.curr = pageInfo.curr - 1;
if (pageInfo.curr < 0) {
pageInfo.curr = pageInfo.limit - 1;
pageInfo.page = pageInfo.page - 1;
if (pageInfo.page < 0) {
pageInfo.page = PAGE_COUNT;
}
}
console.log(pageInfo);
};
const onPageNext = () => {
pageInfo.page = pageInfo.page + 1;
if (pageInfo.page > PAGE_COUNT) {
pageInfo.page = 0;
pageInfo.curr = 0;
}
console.log(pageInfo);
};
const onPagePrev = () => {
pageInfo.page = pageInfo.page - 1;
if (pageInfo.page < 0) {
pageInfo.page = PAGE_COUNT;
}
console.log(pageInfo);
};
const fetctData = () => {
const curr = pageInfo.page * pageInfo.limit;
return allQuestions.slice(curr, curr + 10);
};
onNext();
console.log(pageInfo);
onPrev();
console.log(pageInfo);
onNext();
onNext();
onNext();
onNext();
onNext();
console.log(pageInfo);
onNext();
onNext();
console.log(pageInfo);
onNext();
console.log(pageInfo, fetctData());
onPageNext();
console.log(pageInfo, fetctData());
onPagePrev();
console.log(pageInfo, fetctData());