javascript – Elimination quiz with filters and results shown on same page

Questions:

Currently working on a digital resources page for a library. This library uses the CMS Drupal, and like many libraries has a digital library, with multiple online resources that link out. Each digital library resource has its own clickable icon in a grid format. Each digital resource is its own node, and they have been placed in a view. There has also been a separate view placed on the digital library page which is a flickity carousel with a view placed inside, with each individual resource node filter placed in each slide of the carousel.

The original project was to hopefully create a grid view of the resources (which was easy enough) and have the filters presented one at a time like questions to the user, and every time the user answered these questions, like a quiz, the resources would also filter on the same page, showing the results in real time, eventually leading to one or two databases that matched with the responses that you have given.

The problem seems to be that it is hard to imagine a way that this can be done all on one page, asking a question,user answers, eliminate resource icons and move on to the next question seamlessly. The carousel seems like an okay solution, except you have to manually select the arrow of the carousel in order to see the next question. Also currently once you move on to the next slide carousel fliter question you automatically jump back to the first filter question. It would be nice if by asking the question the next sequential question would appear, the question is, is there any way of achieving this? Is flickity the right and only possible way to achieve this?

Carousel with radio buttons quiz (Uses Flickity.js)
https://flickity.metafizzy.co/

(function ($, Drupal, window, document, undefined) {
     Drupal.behaviors.vplFlicks = {
         attach: function (context, settings) {

if ($("body").hasClass('page-mary-test-view-four')) {
                                                                                                                                
                                                                                                                                $('.view-mary-test-view .views-exposed-form').addClass('four-main');
                                                                                                                                $('.view-mary-test-view .views-exposed-widget').addClass('carousel-cell');
                                                                                                                                $('.view-mary-test-view .views-exposed-widgets').contents().unwrap();

                                                                                                                }
                                                                                                
            $('.four-main').flickity({
                imagesLoaded: true,
                contain: true,
                pageDots: false,
                prevNextButtons: true
            });


    }
    }

})(jQuery, Drupal, this, this.document);

Drupal Views Output
I selected Kids, Art & Recreation, Any radio buttons to narrow down the results to two listings so the code isn’t too overwhelming. You can screenshot this page: http://narwhal.vpl.ca/mary-test-view-four?field_audience_tid=1&field_subject_tid=1&field_access_tid=All

<div class="view view-mary-test-view view-id-mary_test_view view-display-id-page_3 view-dom-id-d3b4c318facf5003a03c0019f1ee2344 jquery-once-2-processed">
        
      <div class="view-filters">
      <form class="ctools-auto-submit-full-form ctools-auto-submit-processed jquery-once-2-processed" action="/mary-test-view-four" method="get" id="views-exposed-form-mary-test-view-page-3" accept-charset="UTF-8"><div><div class="views-exposed-form four-main flickity-enabled is-draggable" tabindex="0">
  
      
<div class="flickity-viewport" style="height: 184px; touch-action: pan-y;"><div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div id="edit-field-audience-tid-wrapper" class="views-exposed-widget views-widget-filter-field_audience_tid carousel-cell is-selected" style="position: absolute; left: 0%;">
                  <label for="edit-field-audience-tid">
            Are you a younger age group?          </label>
                        <div class="views-widget">
          <div id="edit-field-audience-tid" class="form-radios"><div class="form-item form-type-radio form-item-field-audience-tid">
<input type="radio" id="edit-field-audience-tid-all" name="field_audience_tid" value="All" class="form-radio">  <label class="option" for="edit-field-audience-tid-all">- Any - </label>

</div>
<div class="form-item form-type-radio form-item-field-audience-tid">
<input type="radio" id="edit-field-audience-tid-1" name="field_audience_tid" value="1" checked="checked" class="form-radio">  <label class="option" for="edit-field-audience-tid-1">Kids </label>

</div>
<div class="form-item form-type-radio form-item-field-audience-tid">
<input type="radio" id="edit-field-audience-tid-2" name="field_audience_tid" value="2" class="form-radio">  <label class="option" for="edit-field-audience-tid-2">Teens </label>

</div>
</div>        </div>
              </div><div id="edit-field-subject-tid-wrapper" class="views-exposed-widget views-widget-filter-field_subject_tid carousel-cell" style="position: absolute; left: 100%;">
                  <label for="edit-field-subject-tid">
            Which subject makes you the happiest?          </label>
                        <div class="views-widget">
          <div id="edit-field-subject-tid" class="form-radios"><div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-all" name="field_subject_tid" value="All" class="form-radio">  <label class="option" for="edit-field-subject-tid-all">- Any - </label>

</div>
<div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-1" name="field_subject_tid" value="1" checked="checked" class="form-radio">  <label class="option" for="edit-field-subject-tid-1">Art &amp; Recreation </label>

</div>
<div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-2" name="field_subject_tid" value="2" class="form-radio">  <label class="option" for="edit-field-subject-tid-2">Business &amp; Careers </label>

</div>
<div class="form-item form-type-radio form-item-field-subject-tid">
<input type="radio" id="edit-field-subject-tid-3" name="field_subject_tid" value="3" class="form-radio">  <label class="option" for="edit-field-subject-tid-3">Culture &amp; History </label>

</div>
</div>        </div>
              </div><div id="edit-field-access-tid-wrapper" class="views-exposed-widget views-widget-filter-field_access_tid carousel-cell" style="position: absolute; left: 200%;">
                  <label for="edit-field-access-tid">
            Do you have a card?          </label>
                        <div class="views-widget">
          <div id="edit-field-access-tid" class="form-radios"><div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-all" name="field_access_tid" value="All" checked="checked" class="form-radio">  <label class="option" for="edit-field-access-tid-all">- Any - </label>

</div>
<div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-1" name="field_access_tid" value="1" class="form-radio">  <label class="option" for="edit-field-access-tid-1">Everywhere for Everyone </label>

</div>
<div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-2" name="field_access_tid" value="2" class="form-radio">  <label class="option" for="edit-field-access-tid-2">Everywhere for cardholders </label>

</div>
<div class="form-item form-type-radio form-item-field-access-tid">
<input type="radio" id="edit-field-access-tid-3" name="field_access_tid" value="3" class="form-radio">  <label class="option" for="edit-field-access-tid-3">Everywhere for residents </label>

</div>
</div>        </div>
              </div><div class="views-exposed-widget views-submit-button carousel-cell" style="position: absolute; left: 300%;">
      <input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-mary-test-view" name="" value="Apply">    </div></div></div><button class="flickity-prev-next-button previous" type="button" disabled="" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-prev-next-button next" type="button" aria-label="next"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button></div>
</div></form>    </div>
  
  
      <div class="view-content">
      <div class="item-list">    <ul>          <li class="views-row views-row-1 views-row-odd views-row-first">  
          
  <div class="field-image">
    <a href="/digital-library/indigenous-cinema-nfb"><img typeof="foaf:Image" src="/sites/narwhal/public/styles/digital_library/public/db-subject-culture-history.png?itok=-JoSEwzf" alt="Culture and History Subject Icon" title="Culture &amp; History" width="430" height="320"></a>  </div>
    
  <div>        <h3><a href="/digital-library/indigenous-cinema-nfb">Indigenous Cinema at the NFB</a></h3>  </div></li>
          <li class="views-row views-row-2 views-row-even views-row-last">  
          
  <div class="field-image">
    <a href="/digital-library/national-film-board"><img typeof="foaf:Image" src="/sites/narwhal/public/styles/digital_library/public/db-subject-culture-history.png?itok=-JoSEwzf" alt="Culture and History Subject Icon" title="Culture &amp; History" width="430" height="320"></a>  </div>
    
  <div>        <h3><a href="/digital-library/national-film-board">National Film Board</a></h3>  </div></li>
      </ul></div>    </div>
  
</div>
How to&Answers:

Leave a Reply

Your email address will not be published. Required fields are marked *