djplaner / Card-Interface-Tweak

Javascript tweak to transform a collection of Blackboard Learn content items into a visual card interface.
https://djplaner.github.io/Card-Interface-Tweak/
1 stars 1 forks source link

2+ Permanent URL not showing together #22

Closed Samirah89 closed 3 years ago

Samirah89 commented 3 years ago

When creating a link to a permanent url it's fine for the first one but not for the subsequent one. they don't show up in the cards

djplaner commented 3 years ago

Thanks for raising the issue.
I'm assuming that the permanent URL you mention is for the card image? If that is the case, I believe I've re-created the problem. To do this I copy and pasted the permanent URL for the card image into the item. To produce the following.

Screenshot from 2021-02-03 12-38-26

Note: how the Card Image: URL is an active link? Is this similar to what you've done?

If so, I'm in the process of fixing the problem. If not, any further information to help me recreate the problem would be welcome.

Samirah89 commented 3 years ago

Hi David,

The permanent URL is for linking to documents to the item that should show in the cards as below: image see how course calendar is linked. so when students click on it, it will take them to the course calendar page, however in the item we have linked to documents using the permanent link image but both the links are not showing together on the card. if one is there the other doesn't show. This happens for another card as well.

please let me know if you require anymore information. Regards Samirah

djplaner commented 3 years ago

Thank you. That helps identify the use case. I'll see what I can do to fix the problem ASAP.

In the meantime, if you need an immediate solution/workaround, edit the description so just the text of the URL appears. Rather than the image. As shown below.

Screenshot from 2021-02-03 14-04-38

Samirah89 commented 3 years ago

Hi David,

Thanks for that. It'll be great if this could be resolved soon before we go live with our courses.

Appreciate your help. Thanks Samirah

djplaner commented 3 years ago

G'day Samirah,

I've just rolled out some changes that I believe fix your issue (and a somewhat related one). At least in my tests.
Please do let me know if the issue isn't fixed for you.

Before

before

After

Note: Before a URL was missing in the first card (Some permanent URL) and one in the second (https://bblearn..). New code is handling them correctly.

after

Thanks again for reporting the problem.

David.

Samirah89 commented 3 years ago

Hi David,

thasnk you so muhc for looking into this.

unfortunatley this hasn't fixed the issue for us. When we link to documents/readings on the same card only one of them shows instead of both. i tried doing it again:

in the item i created two links (as shown below): image see how two items are linked. However in the cards it shows like this: image

Is there something that we're overlooking?

Regards Samirah

djplaner commented 3 years ago

That's a pity. Sorry. Thank you for letting me know. This is helpful to me because if you're having this problem, then chances are someone I work with will have similar problems.

I wasn't certain that the issue I replicated and fixed, was exactly the one you are using. That's the bit that was overlooked.

Source of the problem

This is all associated with how the Card Interface parses the HTML in the content item for the specific card. The oversight is that the HTML I'm working with (and fixing) isn't exactly the same as the HTML causing you problems.

The best solution I can think of for this is if you could send me a copy of the HTML for the content item that has the problem. This will allow me to examine exactly what's going wrong.

I'll explain how below. Completely understand if you'd prefer not to do this or don't have the time.

How

The basic process is (details below)

  1. Rather than screenshot the content item with the problem, Inspect the element
  2. Copy the HTML for the element
  3. Send it to me here or via email.

Inspect the element

i.e. if you can view the content item with the problem (e.g. the following), rather than take a screenshot use your browser to inspect the element. Exactly how you do this depends on the browser you are using (some generic instructions)

Using the image below as an example, it means right clicking on the word Card Image: in the item. This typically opens up another section showing the HTML code for the item.

problem

Copy the HTML

The following image is what I see when I inspect a content item.

Screenshot from 2021-02-05 11-39-55

You will see something a little different, but you should hopefully be able to see the following HTML. This is the HTML Blackboard uses for the content for one of its items. If you can send me the HTML within this item I can fix the problem.

<div class="details">
  <div class="vtbegenerated">

To do this, you can hopefully right click on the div class="details" item. This will bring up a menu. One of the options on the menu should be Copy. The Copy option might have a couple of different options. One of which should mention HTML. Perhaps Outer HTML or Inner HTML.

Please click on Outer HTML if it's there.

This will copy just the HTML for this item into your clipboard. It will look something like the code at the end of this message.

Send it to me

With the HTML in your clipboard, please paste it into a response to this message or perhaps to my email address

<div class="details">
    <div class="vtbegenerated"> 
 <p>
  Testing out some description content.
 </p> 
 <p>
  This should work with multi pargraphs
 </p> 
 <p>
  <strong>Font formatting </strong>
  <em>and other Html</em>
 </p> 
 <p>
  <br>
 </p> 
 <p>
  Card Date: Week 1
 </p> 
 <p>
  Card Date Label: Before
 </p> 
 <p>
  Card Image Size: contain
 </p> 
 <p>
  Card Label:
 </p> 
 <p>
  Card Image Iframe: 
  <iframe src="https://griffitheduau.sharepoint.com/sites/HLSSacademic/_layouts/15/Doc.aspx?sourcedoc={0ceb11f5-0510-40d4-89d5-1caba39e899f}&amp;action=embedview&amp;wdAr=1.7777777777777777" width="350" height="221" frameborder="0"></iframe>
 </p> 
</div>
  </div>
Samirah89 commented 3 years ago

Hi David,

The issue seems to resolved now. the links are working fine and appearing on the cards

Really appreciate your time and effort. thanks you very much.

Regards Samirah

djplaner commented 3 years ago

Great news Samirah.

I'm assuming the delay may have been caused by a need to refresh the cached version of the card javascript.

Thanks for letting me know and please feel free to pass along any other problems or suggestions for enhancements.

David.