Display table rows one at a time

Question

Hi all,

I wonder if it is possible to display the rows of a table one at a time (with a certain delay), rather then displaying all content at once. I don't know if this would be a matter of HTML only (I guess it would mix also JavaScript, but...). I don't even know if this can be achieved.

Searching the forum only brought me to this thread, that I guess is somewhat different: https://www.sawtoothsoftware.com/forum/135/delay-navigation-button

Does anyone has an idea?

P. S.: The ideal "thing" would be displaying the rows randomly and I'm using 7.0.26.

Answer 1

one way to do it would be  to create a grid with rows containing randomized items. now in javascript you'll do the following:

1- on page load hide all rows except first (perhaps second with labels counted as first)
2- define a function to show the "NEXT" row based on the row being clicked
3- assign the onclick of your td's to call the function defined in 2

Comments

ah, if you have a certain delay you dont need the 3rd step, just define a fixed delay in your function and call it repeatedly.

---

Sorry for the late reply. I'll check your instructions as soon as I have time. Thanks!

---

After a short experiment with grids, I realize I can't use them, or at least I think so, because I want to display a plain table, only containing text, and grid questions must have some type of input control (check boxes, radio buttons, etc...). So, can I assume that what I'm trying to implement isn't reasonable?

---

go with free format then :)

Answer 2

So, what I have now is this:

<table class="inner_table" border=1 width="800px">
    <tr id="row1" style="display:none">
        <td class="item_text_cell alt_color2">[%ListLabel(RandomQuestions1,1)%]</td>
    </tr>
    <tr id="row2" style="display:none">
        <td class="item_text_cell alt_color1">[%ListLabel(RandomQuestions1,2)%]</td>
    </tr>
    <tr id="row3" style="display:none">
        <td class="item_text_cell alt_color2">[%ListLabel(RandomQuestions1,3)%]</td>
    </tr>
    <tr id="row4" style="display:none">
        <td class="item_text_cell alt_color1">[%ListLabel(RandomQuestions1,4)%]</td>
    </tr>
</table>

<script type="text/javascript">

function displayRow(r)
{
    document.getElementById(r).style.display="table-row";
}

setTimeout(displayRow, 1000, "row1");
setTimeout(displayRow, 2000, "row2");
setTimeout(displayRow, 3000, "row3");
setTimeout(displayRow, 4000, "row4");

</script>

It has some constraints, though. It seems this won't work in IE (still, I'll have to verify it). Also, the ideal solution for me would involve having the whole table displayed from the start, with the text in the rows appearing gradually.

The advantage of the solution presented seems to reside in the fact that it does not need to randomize the items in the table (the display method somewhat does it).

Nevertheless, I'll keep digging to see if I can achieve a more perfect solution.

Comments

elegant... why don't you do the same, but instead of rows, change the td styles? draw your rows normal, give id's to your td's, set them to no-display initially then set them to visible just as you did to rows

---

Hummm... I've tried it, but what's the purpose of it? My table gets a weird look, with the cells fitting the size of the text, and so each cell has a different size. Can you clarify it? Sorry, I guess I'm not understanding something. Thanks for the tips, though! :]

---

purpose: "Also, the ideal solution for me would involve having the whole table displayed from the start, with the text in the rows appearing gradually."
solution:

<table class="inner_table" border=1 width="800px">
    <tr id="row1" style="width:800px">
        <td id="td1" class="item_text_cell alt_color2">&nbsp;</td>
    </tr>
    <tr id="row2" style="width:800px">
        <td id="td2" class="item_text_cell alt_color1">&nbsp;</td>
    </tr>
    <tr id="row3" style="width:800px">
        <td id="td3" class="item_text_cell alt_color2">&nbsp;</td>
    </tr>
    <tr id="row4" style="width:800px">
        <td id="td4" class="item_text_cell alt_color1">&nbsp;</td>
    </tr>
</table>
 
<script type="text/javascript">
 
function displayRow(x,r)
{
    document.getElementById(x).innerHTML = r;
}
 
setTimeout(displayRow, 1000, "td1" , "[% ListLabel(RandomQuestions1,1)%]");
setTimeout(displayRow, 2000, "td2" , "[% ListLabel(RandomQuestions1,2)%]");
setTimeout(displayRow, 3000, "td3" , "[% ListLabel(RandomQuestions1,3)%]");
setTimeout(displayRow, 4000, "td4" , "[% ListLabel(RandomQuestions1,4)%]");
 
</script>

instead of setting them to hidden and changing visibility, I've set the td's to space at the start and changed their contents in time.

---

Ah! I see what you did there :] Nice, it was exactly what I wanted! I thought you were suggesting me to do exactly to TDs what I previously did to TRs ;]