skip to Main Content

The below code is slightly different than what is rendered, I haven’t pushed my changes yet. So keep that in mind.

It is supposed to

  • iterate through the YAML data file.
  • place a link everywhere that is required of it.

However, currently, it is only placing the last element seen by the for loop everywhere I want a link.

I have a YAML file with two links, and instead of placing the link in the block associated with its PID, it is placing the second link in all link locations.

I am using REGEX to parse, so anywhere in the YAML file that is aaaa a link gets replaced at that location. That works, it just doesn’t place the right link.

Now the even more confusing part is that the first console.log console.log(faqLink{{ faq_link_pid }}); prints all of the links, correctly and in the order, they are in the file.

<h1 class="fs-6 fw-500" align="center">Frequently Asked Questions <br> Welcome to our FAQ!</h1>
<div class="accordiobody">
    {% for faq in site.data.faq_yaml.frequently_asked_questions %}
    <div class="accordion">
        <hr>
        <div class="container">
            <div class="question fw-400">
                <h1 class="fs-5 fw-500">
                    {{ faq.question }}
                </h1>
            </div>
            <div class="answer">
                <blockquote>
                    <span class="answerspan">
                        {{ faq.answer }}
                    </span>
                </blockquote>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<script type="text/javascript">
    {% assign faq_link = "" %}
    {% assign faq_link_description = "" %}
    {% assign faq_link_pid = 0 %}
    {% for faq in site.data.faq_yaml.frequently_asked_questions %}
    {% if faq.hyper_link != null and faq.hyper_link != "" %}
    {% assign faq_link = faq.hyper_link %}
    {% assign faq_link_pid = faq.faq_link_pid %}
    

    const faqLink{{ faq_link_pid }} = "{{ faq_link }}";
    {% if faq.link_description != null and faq.link_description != "" %}
    {% assign faq_link_description = faq.link_description %}
    const faqLinkDescription{{ faq_link_pid }} = "{{ faq_link_description }}";
    console.log(faqLink{{ faq_link_pid }});
    function createElement() {
            for (let x in accordion) {
                const link{{ faq_link_pid }} = `<a href="${faqLink{{ faq_link_pid }}} " target="_blank">${faqLinkDescription{{ faq_link_pid }}}</a>`;
                console.log(link{{ faq_link_pid }});
                replaceLink(link{{ faq_link_pid }});
        }
    }
    {% endif %}
    window.addEventListener('load', function () {
        createElement();
    });
    {% endif %}
    {% endfor %}

    const accordion = document.getElementsByClassName('container');

    for (i = 0; i < accordion.length; i++) {
        accordion[i].addEventListener('click', function () {
            this.classList.toggle('active');
        })
    }

    function replaceLink(str) {
        const link = document.querySelectorAll('.answerspan');
        const all_link = link.forEach(function (link) {
            const hyper_link = link.innerHTML;
            link.innerHTML = hyper_link.replace(/aaaa./g, str);
        });
    }
</script>

The YAML file:

---
# Use this YAML file to create a list of FAQ questions and answers.

- question: "How will this work?"
  answer: "Currently, a camera is mounted inside the headset for each eye. The camera streams through wifi to a PC client which processes and sends eye-tracking data to VR Chat."
  hyper_link: ""
  link_description: ""
  faq_link_pid: 3

- question: "What features will be supported?"
  answer: "The goal is eye tracking with eye openness and some form of pupil dilation. A far away aspiration of this project is some form of weak foveated rendering because it's cool and any small performance increase in VR is welcome."
  hyper_link: ""
  link_description: ""
  faq_link_pid: 4

- question: "When will this be completed?"
  answer: "When it's done 😉 I have a semi-busy life so development may slow and speed up inconsistently. I have a goal to be done with all base features in June."
  hyper_link: ""
  link_description: ""
  faq_link_pid: 5

- question: "Will IR damage my eyes?"
  answer: "This project has safety in mind. If you do all of the safety measures we put in place and visually test the amount of IR light you will be fine. Please note we have not finished development of all safety stuff so be careful aaaaa  ."
  hyper_link: "https://dammedia.osram.info/media/bin/osram-dam-2496608/AN002_Details%20on%20photobiological%20safety%20of%20LED%20light%20sources.pdf"
  link_description: "here is a pdf with safety information"
  faq_link_pid: 6

- question: "How expensive will this be?"
  answer: "My goal is to keep it as cheap as possible with around $75 as the absolute max, with current projections being around $25-40"
  hyper_link: ""
  link_description: ""
  faq_link_pid: 7

- question: "How do I set up my avatar?"
  answer: "Check out the VR Chat face tracking wiki on our GitHub. Keep in mind that we currently only support float parameters. aaaa "
  hyper_link: "https://google.com"
  link_description: "Google"
  faq_link_pid: 8
---

2

Answers


  1. Chosen as BEST ANSWER

    I solved my issue by delting all of the javascript and REGEx and simply using the Liquid replace function. No JS needed. I was just over-complicating it because i hadn't read the liquid documetnation well enough :)

    
    <span class="answerspan{{ faq.faq_link_pid }}">
      {%- capture editable_part -%}
       <a href="{{ faq.hyper_link }}" target="_blank">{{ faq.link_description }}</a>
      {%- endcapture -%}
      {% if faq.answer contains 'aaaa ' %}
      {{ faq.answer | replace: 'aaaa ', editable_part }}
      {% else %}
      {{ faq.answer }}
      {% endif %}
    </span>
    

  2. Why would you use regex + javascript to place the link? It’s best to just put everything you want hidden in the HTML inside a <DIV class=hidden"> and then toggle a CSS property display:none for the DIV using javascript.

    This would also work better with browsers with js turned off. More specifically: write everything in the HTML and leave the display on the DIVs you want hidden (i.e. do not set any display on the CSS file). Then use js to place upon the page loading a display:none in all these DIV elements; then use js to toggle the display for a single element.

    E.g. using jquery, you would do something like

    jQuery(document).ready(function($) {
      //Set default open/close settings
      var divs = $('.hidden').hide(); //Hide/close all containers
    

    and then on the clickable element use slideToggle() to toggle the display of the next element (you will have to look at your DOM tree to get exactly which element)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search