0 votes
in SoSci Survey (English) by s154123 (255 points)

I have 100 pictures, containing some detailed information. In each trial, I would like to ask my participants to read the information in 5 pictures and then rank them respectively. Just to clarify, the pictures are resumes. Therefore my participants should be able to click on each picture and see them in a larger size to read the information.
To do so, I chose a ranking question type and give each card a short description. Then I added the below JavaScript in the Layout: HTML code in in the Text Elements for the Questionnaire:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>
</head>
and then I added the below Java script in the Text elements and label just to try, for now, I am adding one picture;
<img id="myImg" src="pro://2.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>

But it is not working as I want. The text I added is not related to the ranking system which I want. What I want is, click on each card, and then have the resume related to that specific card.

Here is the link;
https://www.soscisurvey.de/admin/index.php?o=Questionnaire
or
https://www.soscisurvey.de/Pilot_study/?act=JL74nTAEyQAZ1cks2jIrZRc9

I really appreciate your advice on how to solve this issue.

Best wishes

by SoSci Survey (302k points)
Unfortunatly, the URL(s) do not work. Please refer to the manual how to create a working pretest URL: https://www.soscisurvey.de/help/doku.php/en:survey:pretest
by s154123 (255 points)
edited by SoSci Survey
by SoSci Survey (302k points)
If I understand you correctly, you would like to display the small image as a ranking card? Then please use the <img> tag as itemtext for one of the cards (items) in the ranking question:

<img id="myImg" src="pro://2.jpg" alt="Lebenslauf Tom" style="width:100%; max-width: 300px">

Do not forget to remove the tag from the HTML code that you currently have on the page. After that, let's take another look on the questionnaire.
by s154123 (255 points)
Thank you for your prompt response.
with the given code, my participants would not be able to read the information on each card. I want to have 5 small cards on each page. Then I want that to be shown in a larger size when clicking on each card.
by SoSci Survey (302k points)
> with the given code

That was the code that you have already posted above, yourself. To have the image on the cards, it is necessary to put the image tag into the item text.

But, I can see the problem: Clicking does not enlarge the image any more. This is because the click is used for starting the drag. Give me a little time to check the JavaScript code of the ranking question and find a way how to trigger the previous click event if the user clicked but did not mode the mouse until releasing the mouse button.
by s154123 (255 points)
Thank you very much.

I am eagerly looking forward to it.
Best
by s154123 (255 points)
Dear Soci Survey team!

Would you please help me to solve the issue?

Best
by SoSci Survey (302k points)
Alright ... the good news is: The click should work in the ranking. As far as I can see, you simple did not add the JavaScript code

var modal = document.getElementById("myModal");
// etc.

Anywhere on the questionnaire page. I recommend to put that into a text (display: HTML code) and drag the text below the ranking question.

Still, another issue may arise next. The zoom will work, but we may not be able to drag the card any more, because whenever the click goes down, it may zoom. That is when I may have to add some new event triggers for the case that the mouse was clicked and released without being moved.

But first, let's start with responding to the click.
by s154123 (255 points)
Many thanks for your response.
I tried that but still is not working :(
May I request for an online meeting via zoom or Skype as I can share the screen and explain what exactly I want to have in my survey?
by SoSci Survey (302k points)
I am afraid, you will have to learn some HTML and JavaScript on your own, if you like a result that fits your extraordinary ideas.

If I am not mistaken, you are using our services incl. the online support completely for free. We have more than 10.000 surveys every year, and it's hard and expensive enought to support them here. If we start giving telephone and zoom support, and implement every individual idea for every user, we will not be able to keep the service online.

If you want us to implement your idea, we can do that, but the estimate effort is ~100 € plus tax. And I cannot guarantee that we will find time for it this week, because there's really a lot work to do since Corona sent thousands of studies from the labs into the Internet.

Please do not get me wrong: I am willing to help you, just because I think that there is a good research out there. This actually was my spare time, I invest for that. But you did not even add the JavaScript into the page, as I recently asked you to do. So, I ask you again: Add this little JavaScript into the page (see https://www.soscisurvey.de/help/doku.php/en:create:javascript)

1 Answer

+1 vote
by SoSci Survey (302k points)

So, some serious changes needed to be done in the underlying JavaScript, but now the ranking question fires a JavaScript Event whenever a card is clicked but nit dragged.

Given that you have added the CSS code to the layout and the images to the cards, the following HTML/JavaScript code, when placed below the question in the questionnaire, should do the trick (please note that AB01 must be replaced by the question ID of the ranking question).

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Listen for clicks
window.addEventListener("load", function() {
    console.log(SoSciTools.questionnaire.AB01.node);
    SoSciTools.questionnaire.AB01.node.addEventListener("click", zoom);
});

function zoom(evt) {
  if (!(evt.detail && evt.detail.cardNode)) {
    return;
  }
  var img = evt.detail.cardNode.getElementsByTagName("img")[0];
  var modalImg = document.getElementById("img01");

  modal.style.display = "block";
  modalImg.src = img.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>

And then a methodical point: You shall ensure that the images are somewhat recognizable also in the small display. Maybe place a name above or below the image.

by s154123 (255 points)
Thank you very much.
The problem was solved with this code :))))))))

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...