Weird discrepancy between preview and HIT page on MTurk - amazon-web-services

Question

I am trying to create an MTurk task with a basic multi-page navigator
written in Javascript. I have tested it offline and everything work just
fine. I got the code onto MTurk, and in the preview page, everything still
work. However, when I tried to create a batch of jobs, the worker's view
does not show the navigator bar, even with exactly the same code (see
attached screenshots).
I also attached my code for reference.
<!-- You must include this JavaScript file -->
<!--<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>-->
<style>
.pagination {
margin-top: 18px;
font-size: 0;
text-align: center;
}
.pagination .page-li {
display: inline-block;
font-size: 15px;
line-height: 1;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.pagination .page-li:hover {
cursor: pointer;
background-color: #EAEAEA; }
.pagination .page-li.page-active {
cursor: default;
color: #fff;
border-color: #555555;
background-color: #555555;
}
.pagination .page-li.number-ellipsis {
border: none;
cursor: default;
}
.pagination .page-li.number-ellipsis:hover {
background-color: #fff; }
.pagination .page-number {
width: 38px;
padding-top: 8px;
padding-bottom: 8px;
border: 1px solid #EAEAEA;
text-align: center;
}
.pagination .page-prev {
padding: 8px 14px;
margin-right: 8px;
border: 1px solid #EAEAEA;
}
.pagination .page-prev.no-prev {
color: #c6c6c6;
}
.pagination .page-prev.no-prev:hover {
cursor: default;
background-color: #fff;
}
.pagination .page-next {
padding: 8px 14px;
margin-left: 8px;
border: 1px solid #EAEAEA;
}
.pagination .page-next.no-next {
color: #c6c6c6;
}
.pagination .page-next.no-next:hover {
cursor: default;
background-color: #fff;
}
.pagination .number-ellipsis {
display: inline-block;
font-size: 15px;
padding: 8px 14px;
}
.pagination .number-ellipsis.page-hidden {
display: none;
}
</style>
<!--<crowd-form answer-format="flatten-objects" >-->
<div>
<p><b>Question: </b> </p>
<input type="radio" name='choice-x' value="y"> <label> Yes </label>
<br>
<input type="radio" name='choice-x' value="n"> <label> No </label>
</div>
<div class="box"> random </div>
<!--</crowd-form>-->
<script type="text/javascript">
class SimplePagination {
constructor (totalPageCount) {
if (!totalPageCount) return
this.state = {
pageNumber: 1,
totalPageCount
}
}
init (paramsObj) {
let state = this.state
state.container = paramsObj.container || 'body'
state.maxShowBtnCount = paramsObj.maxShowBtnCount || 5
state.pCName = paramsObj.pCName || 'page-li',
state.activeCName = paramsObj.activeCName || 'page-active',
state.dataNumberAttr = paramsObj.dataNumberAttr || 'data-number',
state.prevCName = paramsObj.prevCName || 'page-prev',
state.nextCName = paramsObj.nextCName || 'page-next',
state.disbalePrevCName = paramsObj.disbalePrevCName || 'no-prev',
state.disbaleNextCName = paramsObj.disbaleNextCName || 'no-next',
state.pageNumberCName = paramsObj.pageNumberCName || 'page-number'
state.swEvent = paramsObj.swEvent || 'click'
state.onPageChange = paramsObj.onPageChange
state.totalPageCount > state.maxShowBtnCount + 2 && (state.activePosition = Math.ceil(state.maxShowBtnCount / 2))
this.renderPageDOM()
}
switchPage () {
let state = this.state
let pCNameList = this.selectorEle('.' + state.pCName, true)
let pageNumber
pCNameList.forEach(item => {
item.addEventListener(state.swEvent, e => {
const currentPageEle = e.target
if (this.hasClass(currentPageEle, state.activeCName)) return
let dataNumberAttr = currentPageEle.getAttribute(state.dataNumberAttr)
if (dataNumberAttr) {
pageNumber = +dataNumberAttr
} else if (this.hasClass(currentPageEle, state.prevCName)) {
state.pageNumber > 1 && (pageNumber = state.pageNumber - 1)
} else if (this.hasClass(currentPageEle, state.nextCName)) {
state.pageNumber < state.totalPageCount && (pageNumber = state.pageNumber + 1)
}
pageNumber && this.gotoPage(pageNumber)
})
})
}
gotoPage (pageNumber) {
let state = this.state
let evaNumberLi = this.selectorEle('.' + state.pageNumberCName, true)
let len = evaNumberLi.length
if (!len || this.isIllegal(pageNumber)) return
this.removeClass(this.selectorEle(`.${state.pCName}.${state.activeCName}`), state.activeCName)
if (state.activePosition) {
let rEllipseSign = state.totalPageCount - (state.maxShowBtnCount - state.activePosition) - 1
if (pageNumber <= state.maxShowBtnCount && (pageNumber < rEllipseSign)) {
if (+evaNumberLi[1].getAttribute(state.dataNumberAttr) > 2) {
for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
evaNumberLi[i].innerText = i + 1
evaNumberLi[i].setAttribute(state.dataNumberAttr, i + 1)
}
}
this.hiddenEllipse('.ellipsis-head')
this.hiddenEllipse('.ellipsis-tail', false)
this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
}
if (pageNumber > state.maxShowBtnCount && pageNumber < rEllipseSign) {
this.hiddenEllipse('.ellipsis-head', pageNumber === 2 && state.maxShowBtnCount === 1)
this.hiddenEllipse('.ellipsis-tail', false)
for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
evaNumberLi[i].innerText = pageNumber + (i - state.activePosition)
evaNumberLi[i].setAttribute(state.dataNumberAttr, pageNumber + (i - state.activePosition))
}
this.addClass(evaNumberLi[state.activePosition], state.activeCName)
}
if (pageNumber >= rEllipseSign) {
this.hiddenEllipse('.ellipsis-tail')
this.hiddenEllipse('.ellipsis-head', false)
if (+evaNumberLi[len - 2].getAttribute(state.dataNumberAttr) < state.totalPageCount - 1) {
for (let i = 1; i < state.maxShowBtnCount + 1; i++) {
evaNumberLi[i].innerText = state.totalPageCount - (state.maxShowBtnCount - i) - 1
evaNumberLi[i].setAttribute(state.dataNumberAttr, state.totalPageCount - (state.maxShowBtnCount - i) - 1)
}
}
this.addClass(evaNumberLi[(state.maxShowBtnCount + 1) - (state.totalPageCount - pageNumber)], state.activeCName)
}
} else {
this.addClass(evaNumberLi[pageNumber - 1], state.activeCName)
}
state.pageNumber = pageNumber
state.onPageChange && state.onPageChange(state)
this.switchPrevNextAble()
var inputElems = document.getElementsByTagName("input");
for (var i=inputElems.length-1; i>=0; --i) {
var elem = inputElems[i];
if ((elem.type || "").toLowerCase() == "radio" && elem.name.startsWith("choice")) {
elem.name = "choice-" + pageNumber.toString();
}
}
}
switchPrevNextAble () {
let state = this.state
let prevBtn = this.selectorEle('.' + state.prevCName)
let nextBtn = this.selectorEle('.' + state.nextCName)
state.pageNumber > 1
? (this.hasClass(prevBtn, state.disbalePrevCName) && this.removeClass(prevBtn, state.disbalePrevCName))
: (!this.hasClass(prevBtn, state.disbalePrevCName) && this.addClass(prevBtn, state.disbalePrevCName))
state.pageNumber >= state.totalPageCount
? (!this.hasClass(nextBtn, state.disbaleNextCName) && this.addClass(nextBtn, state.disbaleNextCName))
: (this.hasClass(nextBtn, state.disbaleNextCName) && this.removeClass(nextBtn, state.disbaleNextCName))
}
renderPageDOM () {
let state = this.state
let pageContainer = this.selectorEle(state.container)
if (!pageContainer) return
let { totalPageCount, pCName, prevCName, disbalePrevCName, pageNumberCName,
activeCName, dataNumberAttr, maxShowBtnCount,nextCName, disbaleNextCName } = state
let paginationStr = `
<ul id="pagination" class="pagination">
<br>
<li class="${pCName} ${prevCName} ${disbalePrevCName}">prev</li>
<li class="${pCName} ${pageNumberCName} ${activeCName}" ${dataNumberAttr}='1'>1</li>
`
if (totalPageCount - 2 > maxShowBtnCount) {
paginationStr += `
<li class="${pCName} number-ellipsis ellipsis-head" style="display: none;">...</li>`
for (let i = 2; i < maxShowBtnCount + 2; i++) {
paginationStr += `<li class="${pCName} ${pageNumberCName} ${i === 1 ? activeCName : ''}" ${dataNumberAttr}='${i}'>${i}</li>`
}
paginationStr += `
<li class="${pCName} number-ellipsis ellipsis-tail">...</li>
<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${totalPageCount}'>${totalPageCount}</li>
`
} else {
for (let i = 2; i <= totalPageCount; i++) {
paginationStr += `<li class="${pCName} ${pageNumberCName}" ${dataNumberAttr}='${i}'>${i}</li>`
}
}
paginationStr += `<li class="${pCName} ${nextCName}${totalPageCount === 1 ? ' ' + disbaleNextCName : ''}">next</li></ul>`
pageContainer.innerHTML = paginationStr
this.switchPage()
}
isIllegal (pageNumber) {
let state = this.state
return (
state.pageNumber === pageNumber || Math.ceil(pageNumber) !== pageNumber ||
pageNumber > state.totalPageCount || pageNumber < 1 ||
typeof pageNumber !== 'number' || pageNumber !== pageNumber
)
}
hiddenEllipse (selector, shouldHidden = true) {
this.selectorEle(selector).style.display = shouldHidden ? 'none' : ''
}
selectorEle (selector, all = false) {
return all ? document.querySelectorAll(selector) : document.querySelector(selector)
}
hasClass (eleObj, className) {
return eleObj.classList.contains(className);
}
addClass (eleObj, className) {
eleObj.classList.add(className);
}
removeClass (eleObj, className) {
if (this.hasClass(eleObj, className)) {
eleObj.classList.remove(className);
}
}
}
console.log('running slp')
const slp = new SimplePagination(12)
console.log(slp)
slp.init({
container: '.box',
maxShowBtnCount: 3,
onPageChange: state => {console.log('pagination change:', state.pageNumber)}
})
</script>