// ==UserScript==
// @name Cliff DesPeaux
// @namespace https://gist.github.com/Kadauchi
// @version 1.0.0
// @description Hotel Image Rating
// @author Kadauchi
// @icon http://i.imgur.com/oGRQwPN.png
// @include /^https://(www\.mturkcontent|s3\.amazonaws)\.com/
// @hitsave https://www.mturkcontent.com/dynamic/hit?hitId=38G0E1M85M4QD3BEYP7BMC8YT7YVU5
// @hitname Hotel Image Rating
// ==/UserScript==
if (document.getElementsByTagName(`strong`)[0].textContent !== `How much is the image making you want to stay at the hotel?`) return;
function SHOW () {
for (let i = 0; i < images.length; i ++) images[i].style.display = `none`;
images[index].style.display = ``;
counter.textContent = index + 1;
for (let element of document.querySelectorAll(`[class="rate"]`)) element.style.backgroundColor = ``;
for (let element of images[index].querySelectorAll(`[type="radio"]`)) if (element.checked) document.querySelector(`[class="rate"][value="${ element.value }"]`).style.backgroundColor = `lightgreen`;
}
function PREV () {
if (index === 0) return;
index --;
SHOW();
}
function NEXT () {
if (index === 9) return;
index ++;
SHOW();
}
document.getElementsByClassName(`container`)[0].insertAdjacentHTML(
`afterend`,
`<div class="text-center">` +
`<button id="prev" style="margin: 3px;" type="button">Previous</button>` +
`<button class="rate" value="1" style="margin: 3px;" type="button">1</button>` +
`<button class="rate" value="2" style="margin: 3px;" type="button">2</button>` +
`<button class="rate" value="3" style="margin: 3px;" type="button">3</button>` +
`<button class="rate" value="4" style="margin: 3px;" type="button">4</button>` +
`<button class="rate" value="5" style="margin: 3px;" type="button">5</button>` +
`<button class="rate" value="6" style="margin: 3px;" type="button">6</button>` +
`<button class="rate" value="7" style="margin: 3px;" type="button">7</button>` +
`<button class="rate" value="8" style="margin: 3px;" type="button">8</button>` +
`<button class="rate" value="9" style="margin: 3px;" type="button">9</button>` +
`<button class="rate" value="10" style="margin: 3px;" type="button">10</button>` +
`<button id="next" type="button">Next</button>` +
`</div>` +
`<div class="text-center"><span id="counter"></span> / 10</div>`
);
let index = 0;
const images = document.getElementsByClassName(`form-group`);
const counter = document.getElementById(`counter`);
for (let i = 0; i < images.length; i ++) {
images[i].style.display = `none`;
images[i].parentElement.className = `text-center`;
images[i].parentElement.parentElement.className = `text-center`;
}
document.addEventListener(`click`, function (event) {
const element = event.target;
if (element.matches(`#prev`)) PREV();
if (element.matches(`#next`)) NEXT();
if (element.matches(`.rate`)) {
document.getElementById(`rating${ index + 1 }-${ element.value }`).click();
NEXT();
}
});
window.addEventListener(`keydown`, function (event) {
const key = event.key;
if (key.match(/0/)) document.querySelector(`[class="rate"][value="1${ key }"]`).click();
if (key.match(/[1-9]/)) document.querySelector(`[class="rate"][value="${ key }"]`).click();
if (key.match(/Enter/)) document.querySelector(`[type="submit"]`).click();
});
SHOW();