Modificare quiz

[Neptune]

Salve a tutti,
ho uno script in javascript che mi serve per creare un Quiz, dove l'utente seleziona le risposte alle domande ed il javascript gli dice, domanda per domanda, se ha risposto in maniera corretta o meno. Questo risultato lo tramuta in un immagine con una spunta verde chiamata correct.gif per il caso positivo, altrimenti richiama incorrect.gif.

Il quiz è quindi strutturato come : Domanda, sotto tre possibili risposte, e poi le altre domande nello stesso stile.

Ora quando clicco su una possibile risposta l'immagine di corretto o non corretto me la fa apparire su un'altro rigo, subito dopo la domanda, questo fa si che il quiz "si ingrandisce" e mi si rovina il layout grafico (per vari motivi non posso farlo che si autoingrandisce, perchè per il progetto che devo fare non ci devono essere scroll). Vorrei poter fare che la gif di corretto o non corretto mi appaia accanto alla domanda, e non più sotto. Non riesco però a capire in questo codice come poter fare:


quiz_functions.js

var useranswers = new Array();
var answered = 0;

function renderQuiz()
{
	for(i=0;i<questions.length;i++)
	{
		document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '">[img]blank.gif[/img]</span></p>');
		for(j=0;j<choices[i].length;j++)
		{
			document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label>
');
		}
	}
	document.writeln('

<input type="submit" value="Mostra Risultato" onclick="showScore()" /> <input type="submit" value="Ricomincia Quiz" onclick="resetQuiz(true)" /></p><p style="display:none">[img]correct.gif[/img][img]incorrect.gif[/img]</p>');
}
function resetQuiz(showConfirm)
{
	if(showConfirm)
		if(!confirm("Sei sicuro di voler cancellare le tue risposte?"))
			return false;
			
	document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId)
{
	useranswers[questionId] = obj.value;
	document.getElementById(labelId).style.fontWeight = "bold";
	disableQuestion(classId);
	showResult(questionId);
	answered++;
}
function showResult(questionId)
{
	if(answers[questionId] == useranswers[questionId])
	{
		document.getElementById('result_' + questionId).innerHTML = '[img]correct.gif[/img]';
	}
	else
	{
		document.getElementById('result_' + questionId).innerHTML = '[img]incorrect.gif[/img]';
	}
}
function showScore()
{
	if(answered != answers.length)
	{
		alert("Non hai ancora risposto a tutte le domande!");
		return false;
	}
	questionCount = answers.length;
	correct = 0;
	incorrect = 0;
	for(i=0;i<questionCount;i++)
	{
		if(useranswers[i] == answers[i])
			correct++;
		else
			incorrect++;
	}
	pc = Math.round((correct / questionCount) * 100);
	alertMsg = "Risposte corrette " + correct + " su " + questionCount + "\n\n";
	alertMsg += "Hai risposto correttamente al " + pc + "% delle risposte! \n\n";
	if(pc == 100)
		alertMsg += response[0];
	else if(pc >= 90)
		alertMsg += response[1];
	else if(pc >= 70)
		alertMsg += response[2];
	else if(pc > 50)
		alertMsg += response[3];
	else if(pc >= 40)
		alertMsg += response[4];
	else if(pc >= 20)
		alertMsg += response[5];
	else if(pc >= 10)
		alertMsg += response[6];
	else
		alertMsg += response[7];
		
	if(pc < 100)
	{
		if(confirm(alertMsg))
			resetQuiz(false);
		else
			return false;
	}
	else
	{
		alert(alertMsg);
	}
}
function disableQuestion(classId)
{
	var alltags=document.all? document.all : document.getElementsByTagName("*")
	for (i=0; i<alltags.length; i++)
	{
		if (alltags[i].className == classId)
		{
			alltags[i].disabled = true;
		}
	}
}

quiz_introduzione.js

var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();

questions[0] = "1) Un computer è";
choices[0] = new Array();
choices[0][0] = "Un televisore molto potente";
choices[0][1] = "Una macchina in grado di eseguire programmi applicativi";
choices[0][2] = "Una console di gioco";
answers[0] = choices[0][1];

questions[1] = "2) Indica quali tra queste è una periferica di input";
choices[1] = new Array();
choices[1][0] = "Monitor";
choices[1][1] = "Stampante";
choices[1][2] = "Mouse";
answers[1] = choices[1][2];

questions[2] = "3) L'unità centrale permette";
choices[2] = new Array();
choices[2][0] = "di elaborare le tue richieste";
choices[2][1] = "di stampare i tuoi documenti";
choices[2][2] = "di visualizzare il tuo lavoro";
answers[2] = choices[2][0];

// response for getting 100%
response[0] = "Ottimo hai appreso tutti i concetti";
// response for getting 90% or more
response[1] = "Discreto, ti manca poco alla perfezione"
// response for getting 70% or more
response[2] = "Buono, potresti fare di meglio";
// response for getting over 50%
response[3] = "Sufficente, ti consiglio di impegnarti di più";
// response for getting 40% or more
response[4] = "Ti consiglio di rivedere la teoria";
// response for getting 20% or more
response[5] = "Ti consiglio di rivedere la teoria";
// response for getting 10% or more
response[6] = "Ti consiglio di rivedere la teoria";
// response for getting 9% or less
response[7] = "Ti consiglio di rivedere la teoria";

che poi richiamo con il seguente codice html nel body della mia pagina:

<script type="text/javascript">
renderQuiz();
</script>
<noscript>
You must have JavaScript enabled to view the quiz
</noscript>

mentre lo includo nell'head con il seguente codice

<script type="text/javascript" src="quiz_introduzione.js"></script>
<script type="text/javascript" src="quiz_functions.js"></script>
<style type="text/css">
label, input
{
	cursor:pointer;
}
.question
{
	color:darkblue;
	font-size:14px;
	font-weight:bold;
}

</style>

vi ringrazio in anticipo per l'aiuto,
Neptune.

[cavicchiandrea]

Agli id document.getElementById('result_' + questionId) devi associargli una classe che con un float l'affianchi alla domanda, problema css