Question

I know a bit of PHP and so also HTML/CSS, and I have made a simple quiz program allowing users to create and do quizzes that are stored in a MySQL database. Now what I am trying to do is improve the usability and efficiency of the program.

On the createQuestions form, there are eight textboxes, users can fill in between 2 or 8 of these boxes with answers. Although I think this looks messy with all eight, and what I would like is to have 2 textboxes, and when there is text in the second one, the third one appears and so on.. up to eight

I spent a few hours learning a bit of basic JS, and managed to get it, so that there was a button that changed the visibility propities of the input box, label and radio button of each row. Although I wrote it really inefficiently lots of lines of code to do not much :p – giving each object a separate ID, and it still didn’t work that well.

Below is an example of how my HTML is laid out, I have eight of these, though I could replace this with one, and a PHP for loop with a limit of 8.

<div id="c">
<p class="subFont" id="cT" style="display:none;">Answer 3</p>
<input type="text" name="optionC"  class="textbox" style="display:none;" id="cI">
<input type="radio" name="correctAns" value="c" id="cR" style="display:none;">
<input type ="button" name="add" value="d" style="background-color:green;" onclick="addBox('d', 'inline')" id="cB" style="display:none;">
</div>

Any suggestions on how to write the script descried above? Please could you comment or briefly explain your workings, so I can learn from it 🙂

Thank you loads in advance, I’m so grateful to all you guys on stackoverflow 😉

ps, any suggestions for learning js resources?

Answer 1

Pure Javascript

to hide/show object id=”cR”

// hide
document.getElementById('cR').style.display = 'none';

// show
document.getElementById('cR').style.display = 'block';

to append textarea to

document.getElementById('c').innerHTML += '<textarea name=".." id=".."></textarea>';

events:

<input type="text" id="xxx" onchange="your action here" />

jQuery

to hide/show object id=”cR”

// hide
$('#cR').hide();
$('#cR').fadeIn(); // with fade in effect

// show
$('#cR').show();
$('#cR').fadeOut(); // width fade out effect

to append textarea to

$('#c').append('<textarea name=".." id=".."></textarea>');

events:

$('#xxx').change(function() {
    your action here
});