0 votes
in Methoden-Fragen by s154123 (255 points)

I generated CVs in the Excel program. My participants should first grade them and then rank them. To be more clear, I do not have questions, the task of my participants will be grading and ranking 5 CVs in each trial. I would like to have 3 CVs in one page and 2 in the next page. Please kindly advise me on how to do that?
Thank you very much

1 Answer

+1 vote
by SoSci Survey (325k points)

I would like to have 3 CVs in one page and 2 in the next page. Please kindly advise me on how to do that?

Well, you will simply need an idea how to present the CVs and how the ranking should look like.

By and large, there is a ranking question type that allows for cards to be dragged and dropdowns to be used. I would consider the option to have a short name/description on the cards and a button [details] below, and use some JavaScript to display the full CV when the [details] button is clicked.

But, you probably know better how it should look like...

by s154123 (255 points)
I have the following code but when I add this to the text in order to add my images to be ranked, it is not working. It is working separately though. I really appreciate your advice on that.

Best regard

 <!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>
<body>


<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">&times;</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>

</body>
</html>
by SoSci Survey (325k points)
Innerhalb des Fragebogens können Sie nur den Code verwenden, der zwischen <body> und </body> steht. Den <style>-Code müssten Sie entweder direkt ins "Fragebogen-Layout" verschieben oder mittels pageCSS() im Kopfbereich der Seite einbinden (dann ohne <style> außenherum). Das </body> und </html> darf generell nicht im Fragebogen verwendet werden, weil es die Anzeige weiterer Inhalte auf der Seite (inkl. Weiter-Knopf) blockiert. Die Fragebogen-Seite beinhaltet diese Elemente bereits an geeigneter Stelle.
by s154123 (255 points)
Thank you very much for your response.
Could you please show me (step by step) in “Questionnaire layout” (or how to use pageCSS() ) where should I add the javascript codes.
Warmest regards
by s154123 (255 points)
edited by s154123
Thank you for sending the above link. But unfortunately, I think it is not related to my need. I have some CVs which I save them as pictures. The resumes need to be ranked, therefore, as here was mentioned I chose a ranking question type and a brief description on each card. Now, I want to  to display the full picture of each resume when I click on each card. I sent the code I have here previously. The above code is working when I added it as a text (under the project name - "add text".)
I want to use the text as one of the items in the ranking. How can I use a created text to one of the items in ranking.
Best,
by SoSci Survey (325k points)
> The above code is working when I added it as a text (under the project name - "add text".)

Let's go through this step by step. First, your HTML code starts as follows:

<!DOCTYPE html>
<html>
<head>

These are elements that MUST NOT be used in a text (HTML code) within the questionnaire, because the questionnaire page itself already contains these elements.

So, using them will cause trouble, for example preventing to display other elements (such es subsequent CVs) correctly. First step therefore: Split your code into the part that belongs to the HTML's <head> and the part that goes into the <body>.

Take the <head> part, and write it into the layout (therefore the first link, above). You will find a <head> there and can put your code into the <head> section.

Step 2: Take the contents within the <body> tag (without the <body> tag) and put this (and only this) into a text (HTML code) in your list of questions.
by s154123 (255 points)
Thank you very much for your precise and step by step guidance.
I have tried your instruction. Successfully,  I have the images on the page, and it is possible to zoom in after a click. But the problem still is, the images are not connected to the ranking. Please kindly advise me on how to do that. I wanted that
by SoSci Survey (325k points)
> But the problem still is, the images are not connected to the ranking.

Okay, let's clearify that in a separate question here in the online support. It's getting messy down here in the comments :)

In the new question, please provide a pretest URL that allows access directly to the page with the images/ranking. And also please specify how the images and the ranking shall behave to one-another.

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

...