Bug: Special characters for the key term name prevent the definition from being replaced and instead they show default "Example Content."

[ztraboo]

Todo: Need to figure out why the definition is not being replaced. I believe it's due to the camel casing of the definition id tag for these special characters. I believe that we would want to target this file src/xblocks/xblock-keyterms/keyterms/static/js/src/keyterms.js for a fix.

Example 1 – Uppercase and Lowercase Characters The (IIoT) has the lowercase o that follows two uppercase II.

Entered in values for the key term

Industrial Internet of Thing (IIoT)
The network multitude of industrial devices connected by communication technologies that results in systems that can monitor, collect, exchange, analyze, and deliver valuable new insights.

Rendering in the XBlock for Example 1

HTML Code for Example 1

<div class="card">
   <div class="card-header" id="headingIndustrialInternetOfThingIIoT">
      <h5 class="mb-0">
         <button aria-controls="collapseIndustrialInternetOfThingIIoT" aria-expanded="true" class="collapse-btn collapse-btn-link" data-target="#collapseIndustrialInternetOfThingIIoT" data-toggle="collapse">
            <i class="fa fa-chevron-down pull-right"></i>            <div class="keyterm-title"> Industrial Internet of Thing (IIoT) </div> 
         </button>
      </h5>
   </div>
   <div aria-labelledby="headingIndustrialInternetOfThingIIoT" class="collapse show" data-parent="#allKeytermsList" id="collapseIndustrialInternetOfThingIIoT" style="">
      <div class="collapseIndustrialInternetOfThingIIoT card-body">
         Example Content.
      </div>
   </div>
</div>

Example 2 – Special characters (e.g. /) The / character for the key term is causing the issue.

Entered in values for the key term

IT/OT Convergence
Integration of information technology systems with operational technology systems.

Rendering in the XBlock for Example 2

HTML Code for Example 2

<div class="card">
   <div class="card-header" id="headingItOtConvergence">
      <h5 class="mb-0">
         <button aria-controls="collapseItOtConvergence" aria-expanded="true" class="collapse-btn collapse-btn-link" data-target="#collapseItOtConvergence" data-toggle="collapse">
            <i class="fa fa-chevron-down pull-right"></i>            <div class="keyterm-title"> IT/OT Convergence </div> 
         </button>
      </h5>
   </div>
   <div aria-labelledby="headingItOtConvergence" class="collapse show" data-parent="#allKeytermsList" id="collapseItOtConvergence" style="">
      <div class="collapseItOtConvergence card-body">
         Example Content.
      </div>
   </div>
</div>

[ztraboo]

Another special character is the long dash –!

[ztraboo]

I'm having issues with the following terms due to the (kVA) and ’ characters.

@becdavid suggested removing the invalid terms and readding them back to the XBlock component because this bug fix should have resolved these issues.

Kilo-Volt-Ampere (kVA)
[Kilo-volt-ampere (kVA) is a unit of apparent power, which is an electrical power unit. One kilo-volt-ampere is equal to 1000]

Kirchhoff’s Current Law (KCL)
[The sum of the currents entering and leaving any junction of conductors is equal to zero or all current that arrives at a point must leave that point.]

[ztraboo]

@becdavid I think that it's related to the single quote character ’ that we copied in from the old Glossary page. When I added and removed this term from the key terms XBlock it still did not render the definition. I also tried a different quote character ' but it did not work either.

 D’Arsonval Movement
[Most commonly used meter movement in DC measurement instruments. A movable coil on which a pointer is mounted rotates in a permanent magnetic field. The amount of current in the coil determines the strength of the electromagnet and therefore the amount of deflection that is seen.]

Here is the HTML behind that term.

​<div class="card">
   <div class="card-header" id="headingDArsonvalMovement">
      <h5 class="mb-0">
         <button aria-controls="collapseDArsonvalMovement" aria-expanded="true" class="collapse-btn collapse-btn-link" data-target="#collapseDArsonvalMovement" data-toggle="collapse">
            <i class="fa fa-chevron-down pull-right"></i>            <div class="keyterm-title"> D’Arsonval Movement </div> 
         </button>
      </h5>
   </div>
   <div aria-labelledby="headingDArsonvalMovement" class="collapse show" data-parent="#allKeytermsList" id="collapseDArsonvalMovement" style="">
      <div class="collapseDArsonvalMovement card-body">
         Error loading content.
      </div>
   </div>
</div>