Is there a way to link to a Text Header in a Module?

[zadowj]

Just wondering if there is a way I can link to a Module's Text Header from a page?

[langlangcat]

Open page, edit, type in a link, highlight the link, go to the right side of your page, click on links tab, module, choose the module you want to link to.

[zadowj]

Thank you for the response, but I am not trying to link to the module, I want to link to a Text Header in the module.  Is this possible?

Thanks again!

[mfriend16]

I have the same question. I'm guessing not, because unlike text headers within a page, there doesn't seem to be a way to create HTML anchors. This would be a super helpful feature. 

[James]

@zadowj 

This is possible, but you will need to use the browser's developer tools to get the link.

I do not know if it will update correctly when you copy the content to reuse it, so this may be a lot of work for one course that you need to duplicate if you reuse the course. I would try it once and then copy the course and see if it's going to work before wasting a lot of time and then finding out I was going to have to do that again next semester.

I'm going to describe how to do this in Chrome, but the process is similar with Firefox (keyboard shortcuts are different). I recommend Chrome as it makes things a little easier to find.

1. Mouse over the header text that you would like to link to.
2. Click the right mouse button and choose Inspect (Ctrl+Shift+I) in Chrome or Inspect Element in Firefox.
3. Scan upwards through the content shown to find the li element that contains the header. It will have an id="context_module_item_12345" (although the 12345 is not the number that you will see). This is the id that you need to use in your link.
4. When you add your link, you will need to use /courses/:course_id#context_module_item_12345. Replace the :course_id with the numeric code for your course. Note that if your home page is not the modules page, then you will need to use /courses/:course_id/modules#context_module_item_12345.

Note that where the browser scrolls to depends on the browser. In Chrome, it scrolls so that my header text is at the very top of the screen. In Firefox, there were still two items above it.

Also note that I have not tested this in the mobile apps. They do things differently than browsers. You may not get the scroll you want if there's not enough content on the page (presumably not a problem with the modules page).

There is a good discussion of anchor tags and some of the shortcomings here: Anchor Tags explained by a language teacher.

[zadowj]

Hey James!  Thanks for this reply.  When I follow your steps, I am not finding an li id.  I believe your method would be the best option out there, but I am thinking that it is not possible to link to a Canvas Text Header.  The only elements I am seeing when inspecting is:

<span title="Week of:" class="title locked_title">Week of:</span> == $0

The "Week of" is the title of my Text Header.

Thanks again for the info.

[James]

You need to scroll up in the elements page to find the list element with the id. I would love to put a picture here, but I was so prolific in helping people in the old community that I have reach my upload limit of 1000 images and cannot put any pictures here in the new community.

Here is the partial structure though (this isn't valid HTML, I'm just putting in the opening tags to show you what it would look like. What you're looking at is near the bottom and you have to go up several levels to get to the li element (first line).

<li id="context_module_item_60929026" class="context_module_item context_module_sub_header ...">
  <div class="ig-row ig-published">
    <div aria-hidden="true" class="ig-handle">
    <span class="type_icon" title="Context Module Sub Header" role="none">
    <div class="ig-info">
      <div class="module-item-title">
        <span class="item_name">
          <span title="Content" class="title locked_title">Content</span>
          <span class="points_possible" style="display: none;">&nbsp;</span>
          <span class="requirement" style="display: none;">&nbsp;</span>
          <span class="completion_requirement" style="display: none;">&nbsp;