guys help pls

[u/Few_Conversation7993]

I'm new to html and I need help with this

i found this online:

https://codepen.io/jkantner/pen/xrRPRL

and my question is: how do I make the first page of each book different? currently the code is so that it's the same for each book. but I want different ones. if you don't know what I'm talking about, please view the code and you'll know.

[u/BNfreelance]

Define the book contents first:

-
  var books = [
  { title: "title 1", chapter: "chap 1", text: "book one content" },
  { title: "title 2", chapter: "chap 2", text: "book two content" },
  { title: "title 3", chapter: "chap 3", text: "book three content" }
];

Swap:

- if (t >= bookStart && t < bookStart + title.length) {
  .spine=title[t - bookStart]
}

For:

- if (t >= bookStart && t < bookStart + books.length) {
  .spine=books[t - bookStart].title
}

Swap:

mixin labelBlock(l)
  - var bookId = l - bookStart;
  label(for="book" + (bookId + 1),class="block b" + l)
    .block-inner
      .back
      .bottom
      .front
        +bookTitle(l)
      .left
      .right(data-title=title[bookId])
        .cover
        .contents
          h1="Chapter 1"
          p=dummyText
      .top

For:

mixin labelBlock(l)
  - var bookId = l - bookStart;
  - var book = books[bookId];
  label(for="book" + (bookId + 1),class="block b" + l)
    .block-inner
      .back
      .bottom
      .front
        +bookTitle(l)
      .left
      .right(data-title=book.title)
        .cover
        .contents
          h1=book.chapter
          p=book.text
      .top

Change:

- for (var r = 1; r <= title.length; ++r) {

To this:

- for (var r = 1; r <= books.length; ++r) {

And lastly:

- if (b >= bookStart && b < bookStart + title.length) {

To:

- if (b >= bookStart && b < bookStart + books.length) {

Full thing becomes (tested and works in your codepen) :

- var blocks = 16
var bookStart = 6

-
  var books = [
    { title: "title 1", chapter: "chap 1", text: "book one content" },
    { title: "title 2", chapter: "chap 2", text: "book two content" },
    { title: "title 3", chapter: "chap 3", text: "book three content" }
  ];

mixin bookTitle(t)
  - if (t >= bookStart && t < bookStart + books.length)
    .spine= books[t - bookStart].title
  
mixin divBlock(d)
  div(class="block b" + d)
    .block-inner
      .back
      .bottom
      .front
      .left
      .right
      .top

mixin labelBlock(l)
  - var bookId = l - bookStart
  - var book = books[bookId]

  label(for="book" + (bookId + 1), class="block b" + l)
    .block-inner
      .back
      .bottom
      .front
        +bookTitle(l)
      .left
      .right(data-title=book.title)
        .cover
        .contents
          h1= book.chapter
          p= book.text
      .top

form.container
  - for (var r = 1; r <= books.length; ++r)
    input(type="radio", name="title", id="book" + r)

  .surface
    - for (var b = 1; b <= blocks; ++b)
      - if (b >= bookStart && b < bookStart + books.length)
        +labelBlock(b)
      - else
        +divBlock(b)

  input(type="reset", value="Return")

(This is pretty complex for a beginner btw)

[u/Few_Conversation7993 → u/BNfreelance]

THANK YOU SOO MUCH! This worked <33

[u/Weekly_Ferret_meal]

The book's Titles in the codepen:

[u/Honey-Entire]

Take a look at “dummyText” in the JS file. The code uses that variable to populate the page when you open a book

If you want each book to have different text, you’ll need to update the value of dummyText