HTML component in an iframe

Elements
1

I am creating a website with RapidWeaver Elements.

Ther are a number of pages to be created.

Each of these pages has a HTML component containing code for a bookWidget quiz located in an iframe.

The link to a quizz is copied from Bookwidgets into the code in the iframe.

Example below shows the first quiz:

<div style="width:100%;"> 

  <iframe 

    src="https://www.bookwidgets.com/play/FDWXAFK" 

    width="95%" 

    height="900" 

    style="border:0; display:block; margin:0 auto;" 

    allowfullscreen 

    loading="lazy"> 

  </iframe> 

</div>

I try to do a similar page for the second quiz also in an iframe:

<div style="width:100%;">

  <iframe

    src="https://www.bookwidgets.com/play/62FZ6V"

    width="95%"

    height="900"

    style="border:0; display:block; margin:0 auto;"

    allowfullscreen

    loading="lazy">

  </iframe>

</div>

However after inputting in the second html code, the first page’s code takes on the same value for the Bookwidget url.

I imagine that this has something to do with Global.

I right click in the HTML and choose Unlink from Global. But this does not work.

What is the solution?

2

You will most likely have to do a separate custom component for each quiz that you want to do. If you make it a global, then any change you make will change for all of them.

Alternatively, save as a template, and you can edit as needed without affecting the others

3

Thanks for your reply.
I have already made separate custom components, and it works. However, I want to create over 200 quizzes in iframes, which would require more than 200 custom components, which you can gather will make the list of components very clunky. I would prefer to have one HTML component where I can reuse many times just changing the QUIZ ID, but I find creating a new page with html code causes the previous HTML codes to adopt the same code.

4

@michealolaoire Ah-ha! This is where custom components really shine, You can easily add in some editable properties so you’ll only need one! I’ve recorded a video to show you how to do it and included the project below :slight_smile:

:backhand_index_pointing_right: Open Project in Elements

2 Likes
5

@dan beat me to it…

Was just about to send you code for it (spent a bit with the bot, and finally got it)…

6

Dan

Thanks for your speedy reply. Looks good. Will give it a try and it should save me a lot of work.

Regards

Michael O’Leary

(Attachment mole.vcf is missing)