I am trying to conduct a questionnaire, in which people rate an image. However, it currently works for when the images are not allocated randomly in the array. When i try to allocate the images randomly, it does not continue to add to the dictionary, it only ever displays the src of the first random image displayed. Here is the code below, and i was wondering if anyone could help me randomly display the images in the array, and once each image has been displayed once, the questionnaire stops.
var currentImage = 0;
var imageArray = ["/Users/rate/images/begin.png", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]
var selected = {};
window.sessionStorage.setItem("selected", JSON.stringify(selected));
var rnd = Math.floor(Math.random() * imageArray.length);
function storeAnswer(id){
var dict = JSON.parse(window.sessionStorage.getItem("selected"));
document.getElementById("mainImage").src = imageArray[rnd];
img = imageArray[rnd].slice(-8)
console.log(img)
var radio = document.getElementsByName("answer");
var rate = id;
var chosen = [rate, img]
console.log(chosen)
for (var i = 0; i < radio.length; i++)
{
if (radio[i].checked)
{
selected = (radio[i].value)
dict[img] = selected;
radio[i].checked = false;
console.log(dict)
window.sessionStorage.setItem("selected", JSON.stringify(dict));
}
}
changeImage();
}
function changeImage(){
var rnd = Math.floor(Math.random() * imageArray.length);
var icon = JSON.parse(window.sessionStorage.getItem("icon"))
if (currentImage >= imageArray.length - 1) {
toDatabase();
} else {
rnd += 1;
}
document.getElementById("mainImage").src = imageArray[rnd]
icon = imageArray[rnd].slice(-8)
console.log(icon)
window.sessionStorage.setItem("icon", JSON.stringify(icon));
}<!DOCTYPE html>
<html>
<head>
<title> App Icons </title>
<link rel="stylesheet" type="text/css" href="/Users/rate/css/mainstyle.css">
<script type="text/javascript" src="/Users/rate/js/main.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-storage.js"></script>
</head>
<body class="body">
<div>
<div>
<hr>
<div class=topbar>
<h1> Do you like this image </h1>
</div>
<hr>
<div class=image>
<img src="/Users/rate/images/begin.png" id="mainImage" width="300px" height="400px"/>
</div>
<hr>
<div class=answer>
<div id=answer>
<label> Strongly Agree </label>
<label><input type="radio" onclick="storeAnswer(this.id)" name="answer" value="1" id="1" required><span>1</span></label>
<label><input type="radio" onclick="storeAnswer(this.id)" name="answer" value="2" id="2" required><span>2</span></label>
<label><input type="radio" onclick="storeAnswer(this.id)" name="answer" value="3" id="3" required><span>3</span></label>
<label><input type="radio" onclick="storeAnswer(this.id)" name="answer" value="4" id="4" required><span>4</span></label>
<label><input type="radio" onclick="storeAnswer(this.id)" name="answer" value="5" id="5" required><span>5</span></label>
<label> Strongly disagree</label>
<hr>
</div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire