FANDOM


Accessibility and usability enhancements for the JuxtaLearn Tricky Topic tool, Diagnostic Quiz and ClipIt. This includes SVG map bits, Sankey diagram, and so on.

Note, the SVG here is a lot more amenable to fixes than the HTML5 canvas + SVG on PhET simulations.

Developer: Martin Hawksey linkedin.com:in/mhawksey, twitter.com:mhawksey and Nick Freear.

These fixes were "forked" from: Fix:OER Evidence Hub.


%YAML 1.2
---
_CONFIG_:
    includes:
        - http://*juxtalearn.net/*
    test_urls:
        - http://trickytopic.juxtalearn.net/maps-summary-by-country/#
        - http://trickytopic.juxtalearn.net/juxtalearn-quiz/4/?embed=1
        - http://juxtalearn.net/wp-admin/
        - http://clipit.juxtalearn.net
        - http://www.juxtalearn.net
        - http://test.juxtalearn.net
        - http://dev.juxtalearn.net
        - http://jxl1.escet.urjc.es/clipit_dev/activity
        - http://juxtalearn.org/sandbox/clipit_befe
        - http://sites.hawksey.info/juxtalearn/
    about_urls:
        - "github.com:IET-OU/oer-evidence-hub-org#juxtalearn"
        - "github.com:jewlofthelotus/SlickQuiz-WordPress"
        - "github.com:juxtalearn/clipit"

    name: {{PAGENAME}}
    description: ""
    default_locale: en-GB
    authors:
        - Nick @nfreear
    created: 2014-05-18
 
    ## Please apply fixes in iframes!
    iframe: yes
 
#
# FIXES - generic.
#
 
a[href = '#'], a[data-toggle=modal], a[href = 'javascript:;'], a[href = 'javascript:void(0)']:
    _note: "Stackoverflow:questions/134845/href-attribute-for-javascript-links-or-ja.."
    role: button

a[target = _blank]:
    role: Opens in new window
 
 
#
# Fixes - ClipIt (Elgg)
# (Note - includes placeholders for Spanish translations..)
#

.sticky-wrapper .navbar-right:
    role: navigation
    aria-label: Main site menu
    aria-label.es: Menú del sitio principal

.navbar-nav a[href *= 'action/logout']:
    title: Log out
    title.es: Salir

.navbar-nav li.separator:
    _note: "'Hiding' a visual separator (' | ')"
    aria-hidden: true

header .search-form:
    role: search
    aria-label: ClipIt search

header .search-form input[name = q]:
    aria-label: Search term
    #placeholder: Search

header .search-form button:
    title: Search
 
 
# ClipIt registration form.

.elgg-form-register input[name = name]:
    id: name

.elgg-form-register [name = email]:
    id: email
    type: email
 
#...
 
# ClipIt login form.
 
"#modal-login button.close":
    title: Close login form
    aria-hidden: false

.elgg-form-login-modal:
    role: form
    aria-labelledby: "#modal-login .modal-title"
 
".elgg-form-login-modal #inputUsername":
    aria-labelledby: .elgg-form-login-modal label[for = exampleInputEmail1]
 
".elgg-form-login-modal #inputPassword":
    aria-labelledby: .elgg-form-login-modal label[for = exampleInputPassword1]
 
 
#
# Fixes - Tricky Topic tool (WordPress)
#
header:
    role: banner
 
"#site-navigation":
    role: navigation

footer:
    role: contentinfo
 
"#content":
    role: main

html:
    lang: en-GB
 
 
# SVG map etc.
 
"#fullscreen-button a":
    role: button
    title: Enter full screen mode (map)
 
svg g#map:
    title: World map
 
svg g#map path.country[d ^= 'M687.02']:
    title: United Kingdom
    aria-label: United Kingdom
    _note: Will these country-labels actually improve accessibility? Needs testing!
 
svg g#map path.country[d ^= 'M373.119']:
    title: United States, including Alaska and Hawaii.
    aria-label: United States
 
svg g#map path.country[d ^= 'M579.312']:
    title: Brazil
 
svg g#barchart:
    title: Bar chart of...?
 
svg g#sandisplay:
    title: Sankey diagram of...?
    aria-labelledby: "#juxtalearn-map svg g#sandisplay text.santitle"
 
"#juxtalearn-map #impressum":
    title: Impressum
 
"#juxtalearn-map #ui":
    title: Customize map
 
 
".page #wpadminbar":
    role: navigation
    aria-label: Admin menu (in-page)
 
#
# Wordpress admin
#
 
".wp-admin #adminmenu":
    role: navigation
    aria-label: Admin menu

.wp-admin .postbox .handlediv:
    role: button
    tabindex: 0
    title: Click to toggle
 
".wp-admin #collapse-menu":
    role: button
    tabindex: 0
    title: Collapse/ expand menu
 
#
# SlickQuiz-WordPress
# github.com:jewlofthelotus/SlickQuiz-WordPress/blob/master/js/admin.js
#

.slickQuiz .QuizTitle label:
    for: input#QuizTitle

.slickQuiz .JL-Quiz-Tricky-Topic label:
    for: select#jlq-trickytopic

.slickQuiz .MainCopy label:
    for: textarea#MainCopy
    # WAS: for: input#MainCopy

.slickQuiz .ResultCopy label:
    for: textarea#ResultCopy

.slickQuiz .Level1small81100Bestsmall:
    for: input#Level1small81100Bestsmall
 

.questionSet .question.actual label:
    for: .questionSet .actual textarea

.questionSet .question.correct label:
    for: .questionSet .correct textarea

.questionSet .question.incorrect label:
    for: .questionSet .incorrect textarea

.questionSet .question.answer label:
    for: .questionSet .answer input
    # WAS: for: .. textarea
 
 
.slickQuiz .questionSetOptions a, .toggleSets a, .addAnswer a, .addQuestion a, a#removeAnswer:
    ##a#toggleQuestion, a#moveQuestion, a#removeQuestion:
    role: button
 
# SlickQuiz-WordPress student UI.
# github.com:jewlofthelotus/SlickQuiz-WordPress/blob/master/php/slickquiz-front.php

.slickQuizWrapper .nameLabel label:
    for: .slickQuizWrapper .nameLabel input

.slickQuizWrapper .emailLabel label:
    for: .slickQuizWrapper .emailLabel input
 
...

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.