https://sites.google.com/site/walteron4awm/
The gadget I made makes use of a .CSV file and pictures/film stored on site
into a file cabinet.
Once the test is taken, the score can be submitted and is transferred to a
google form within google docs.
It works in Google chrome and Firefix but not in IE.
1: The form.submit() function creates errors. If I change the Submit button
name to something else, as some guys suggest, than the function quits
working in any browser.
2: In IE I got a scripting error on line
804 d.base=o.href.match(/^(.*\/)[^\/]*$/)[1]. I suspect the Flash
integration of Google for that. If I Continue (F5) running the script, the
site works fine, I suspects that this part of code is redundant.
I hope someone could help me out, as the use of this gadget would open up a
big opportunity for educational institutes to setup "self guiding courses"
and test systems.
Thanks in advance
Walter
--
You received this message because you are subscribed to the Google Groups
"iGoogle Developer Forum" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/Google-Gadgets-API/-/pIGNpHzDVAUJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/Google-Gadgets-API?hl=en.
?<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
height="800"
width="600"
title="Test CSV"
title_url="https://sites.google.com/site/walteron4awm/";
description="Test based on csv and media"
author="Walter Machiels"
author_email="[email protected]"
screenshot="http://www.wpclipart.com/education/awards/certificate/award_certificate_with_gold_seal.jpg";
thumbnail="http://www.wpclipart.com/education/awards/good_work_medal.jpg";>
<Require feature="views" />
<Require feature="flash" />
</ModulePrefs>
<UserPref
name="folder"
display_name="folder (https://sites.google.com/site/walteron4awm/data)"
required="true" />
<UserPref
name="Quizfilename"
display_name="Quiz - csvfilename (/vragen.csv)"
required="true"/>
<UserPref
name="formkeydata"
display_name="formkey= value(dHRZaW1mRmFsUG12...)"
required="true"/>
<UserPref
name="docspath"
display_name="Google Docs domain(a/vdab/ or empty)"
required="true"/>
<Content type="html" view="home">
<![CDATA[
<script type="text/javascript">
// Get userprefs
var prefs = new gadgets.Prefs();
//global vars
var i=1;
var l= 0;
var html = "<div style='padding: 5px;background-color:
#FFFFBF;font-family:Arial, Helvetica;" + "text-align:left;font-size:90%'>";
var vraagnr = "";
var vraag = "";
var antwoord1 = "";
var antwoord2 = "";
var antwoord3 = "";
var antwoord4 = "";
var val1 = "";
var val2 = "";
var val3 = "";
var val4 = "";
var foto ="";
var help ="";
var CSVfile = [[]];
var aantalvragen = 0;
var aantalgoed = 0;
var procent = 0;
var form_url = "https://spreadsheets.google.com/"+
prefs.getString("docspath")+"spreadsheet/formResponse?pli=1&hl=nl&formkey="+
prefs.getString("formkeydata")+ "&embedded=true&ifq";
/* Generatie nederlandse datumaanduiding */
Maanden = new Array(12)
Maanden[1] = "januari"
Maanden[2] = "februari"
Maanden[3] = "maart"
Maanden[4] = "april"
Maanden[5] = "mei"
Maanden[6] = "juni"
Maanden[7] = "juli"
Maanden[8] = "augustus"
Maanden[9] = "september"
Maanden[10] = "oktober"
Maanden[11] = "november"
Maanden[12] = "december"
Dagen = new Array(7)
Dagen[1]="Zondag"
Dagen[2]="Maandag"
Dagen[3]="Dinsdag"
Dagen[4]="Woensdag"
Dagen[5]="Donderdag"
Dagen[6]="Vrijdag"
Dagen[7]="Zaterdag"
//---CSVToArray---------------------------------------------------------------------
// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
// originated from Ben Nadel
function CSVToArray( strData, strDelimiter ){
// Check to see if the delimiter is defined. If not,
// then default to comma.
strDelimiter = (strDelimiter || ",");
if (strData.charAt(0)==strDelimiter) strData = " ".concat(strData);
// Create a regular expression to parse the CSV values.
var objPattern = new RegExp(
(
// Delimiters.
"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
// Quoted fields.
"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
// Standard fields.
"([^\"\\" + strDelimiter + "\\r\\n]*))"
),
"gi"
);
// Create an array to hold our data. Give the array
// a default empty first row.
var arrData = [[]];
// Create an array to hold our individual pattern
// matching groups.
var arrMatches = null;
// Keep looping over the regular expression matches
// until we can no longer find a match.
while (arrMatches = objPattern.exec( strData )){
// Get the delimiter that was found.
var strMatchedDelimiter = arrMatches[ 1 ];
// Check to see if the given delimiter has a length
// (is not the start of string) and if it matches
// field delimiter. If id does not, then we know
// that this delimiter is a row delimiter.
if (
strMatchedDelimiter.length &&
(strMatchedDelimiter != strDelimiter)
){
// Since we have reached a new row of data,
// add an empty row to our data array.
arrData.push( [] );
}
// Now that we have our delimiter out of the way,
// let's check to see which kind of value we
// captured (quoted or unquoted).
if (arrMatches[ 2 ]){
// We found a quoted value. When we capture
// this value, unescape any double quotes.
var strMatchedValue = arrMatches[ 2 ].replace(
new RegExp( "\"\"", "g" ),
"\""
);
} else {
// We found a non-quoted value.
var strMatchedValue = arrMatches[ 3 ];
}
// Now that we have our value string, let's add
// it to the data array.
arrData[ arrData.length - 1 ].push( strMatchedValue );
}
// Return the parsed data.
return( arrData );
}
//----getRecords----------------------------------------------------------
// This fetches data from a CSV file containing Quiz information. In the
CSV file,
// each record consists of 12 fields.File uses default name vragen.csv
// Pictures,help files and vragen.csv should all be in same folder
function getRecords() {
var params = {};
var url = prefs.getString("folder") + prefs.getString("Quizfilename");
gadgets.io.makeRequest(url, response, params);
}
//----response--------------------------------------------------------------------
// Callback function to process the response
function response(obj) {
var responseText = obj.text;
// Set CSS for div.
CSVfile = CSVToArray(responseText,",");
l = CSVfile.length-2;
//actions on first run
display();
}
//----display--------------------------------------------------------------------
// fill values for form display
function display() {
// assign form values
vraagnr = CSVfile[i][0];
vraag = CSVfile[i][1];
antwoord1 = CSVfile[i][2];
antwoord2 = CSVfile[i][3];
antwoord3 = CSVfile[i][4];
antwoord4 = CSVfile[i][5];
val1 = CSVfile[i][6];
val2 = CSVfile[i][7];
val3 = CSVfile[i][8];
val4 = CSVfile[i][9];
foto = prefs.getString("folder") + "/" + CSVfile[i][10];
help = prefs.getString("folder") + "/" + CSVfile[i][11];
// fill form
document.getElementById("Qnr").innerHTML = vraagnr;
document.getElementById("Question").innerHTML = vraag;
document.getElementById("an1").innerHTML = antwoord1;
document.getElementById("an2").innerHTML = antwoord2;
document.getElementById("an3").innerHTML = antwoord3;
document.getElementById("an4").innerHTML = antwoord4;
show(foto);
//document.getElementById("foto1").src = foto;
// disable submit until end of test
document.forms["ss-form"].elements["submit"].disabled = true;
document.forms["vraagform"].reset();
}
//----show-------------------------------------------------------------------------
// function to show different type of media
function show(file){
var ext = getFileExtension(file);
switch(ext)
{
case "swf":
document.getElementById("foto1").src= "";
document.getElementById("foto1").width=0;
document.getElementById("foto1").height=0;
_IG_EmbedFlash(file, 'video1', {width: 480, height: 360,
flashvars: 'lang=en', wmode: 'opaque'});
//gadgets.flash.embedFlash(file, 'video1', {width: 480, height:
360, flashvars: 'lang=en', wmode: 'opaque'});
break;
case "flv":
document.getElementById("foto1").src= "";
document.getElementById("foto1").width=0;
document.getElementById("foto1").height=0;
_IG_EmbedFlash(file, 'video1', {width: 480, height: 360,
flashvars: 'lang=en', wmode: 'opaque'});
//gadgets.flash.embedFlash(file, 'video1', {width: 480, height:
360, flashvars: 'lang=en', wmode: 'opaque'});
break;
default:
_IG_EmbedFlash("", 'video1', {width: 0, height: 0, flashvars:
'lang=en', wmode: 'opaque'});
//gadgets.flash.embedFlash(file, 'video1', {width: 0, height: 0,
flashvars: 'lang=en', wmode: 'opaque'});
document.getElementById("foto1").src= file;
document.getElementById("foto1").width=480;
document.getElementById("foto1").height=360;
}
}
//----eigendatum--------------------------------------------------------------------
function eigendatum(Datum)
{
var Dag =Dagen[Datum.getDay() + 1];
var Maand = Maanden[Datum.getMonth() + 1];
var Jaar = Datum.getYear() + 1900;
var u= Datum.getHours();
var m= Datum.getMinutes();
var s= Datum.getSeconds();
return Dag + " " + Datum.getDate() + " " + Maand + " " + Jaar+ "
"+u+":"+m+":"+s+" ";
}
//----validatie--------------------------------------------------------------------
// evaluation of answer
function validatie(txt)
/* de waarde TXT is de positie van het antwoord */
{
if ( txt ==null || txt == "")
{
/* Dit mag normaal nooit gebeuren */
alert('Een ongeldige waarde');
return false
}
/* hier wordt w gelijk gemaakt aan de waarde uit de database afhankelijk van
de positie */
if (txt ==1){
w=val1;
}
if (txt ==2){
w=val2;
}
if (txt ==3){
w=val3;
}
if (txt ==4){
w=val4;
}
/* Hier wordt de waarde w gecontroleert, dit is de score vanuit de database */
if (w <1)
{
document.getElementById("Score").innerHTML="Uw antwoord is fout, bekijk de
helpfile";
/* hier wordt de naam van de videofile voor help uit de database gehaald */
show(help);
aantalvragen=aantalvragen + 1;
}
else
{
document.getElementById("Score").innerHTML="Goed zo, proficiat";
show(foto);
aantalgoed=aantalgoed + 1;
aantalvragen=aantalvragen + 1;
if (i==l)
{
// einde test
procent = (aantalgoed / aantalvragen)* 100;
procent = procent - (procent % 1);
var naam = prompt("Naam: ","")
// naam, testnaam (vraagnr laatste vraag), procent, aantal vragen in
test, aantal antwoorden genomen
document.forms["ss-form"].elements["entry.0.single"].value = naam;
document.forms["ss-form"].elements["entry.1.single"].value =
CSVfile[l][0];
document.forms["ss-form"].elements["entry.2.single"].value = procent;
document.forms["ss-form"].elements["entry.3.single"].value = l;
document.forms["ss-form"].elements["entry.4.single"].value =
aantalvragen;
if (naam != null && naam != "")
{
var vandaag= new Date();
var msg = naam + " "+ eigendatum(vandaag)+" \n";
msg +="Totale Score is " + procent + "% of "+aantalgoed +"/"+
aantalvragen+" vragen die je beantwoord hebt van de " +l+" mogelijke vragen.";
document.getElementById("Score").innerHTML=msg;
document.forms["ss-form"].elements["submit"].disabled = false;
}
}
else
{
setTimeout('Clearmsg()',1500);
i +=1;
display();
}
}
}
//----submitForm--------------------
function submitForm(){
var temp_url = document.forms["ss-form"].action;
//alert("Before - action=" + temp_url);
document.getElementById("ss-form").setAttribute("action",form_url);
//alert("After - action ="+ document.forms["ss-form"].action);
//submit the form
document.ss-form.submit();
}
//----Clear msg---------------------------------------------
function Clearmsg(){
document.getElementById("Score").innerHTML=" Kies een antwoord!";
}
//----Navigate--------------------------------------------------------------------
function Navigate(MV)
{
if (MV ==null || MV=="")
{
alert('Geen geldige button');
return false
}
if (MV =="<<")
{
/* Eerste record */
i = 1;
}
if (MV =="<")
{
/* vorige record */
if (i > 2){
i-=1;
}
else {
i=1;
}
}
if (MV ==">")
{
/* volgend record */
if ( i >= l) {
i=l;
}
else {
i +=1;
}
}
if (MV==">>")
{
/*Laatste record */
i = l;
}
vraagnr = "";
vraag = "";
antwoord1 = "";
antwoord2 = "";
antwoord3 = "";
antwoord4 = "";
val1 = "";
val2 = "";
val3 = "";
val4 = "";
foto ="";
help ="";
display();
};
//----filexetention------------------------------
function getFileExtension(filename)
{
var ext = /^.+\.([^.]+)$/.exec(filename);
return ext == null ? "" : ext[1].toLowerCase();
}
//----Debug &
print------------------------------------------------------------------------
// debug flag. When its value is non-zero, debugging messages are displayed
var debug = 0;
// The string containing debugging messages
var debug_html = "";
// Display date
function displayDate (){
// DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
document.getElementById("debug_div").innerHTML = debug_html;
}
}
//----init------------------------------------------------------------------
function init(){
Clearmsg();
getRecords();
displayDate ();
}
//==============================================================================
gadgets.util.registerOnLoadHandler(init);
</script>
<P>
<form name="vraagform" >
<table width="600" border="0">
<tr>
<td style="background-color:#EEEEEE;height:380px;">
<center><div id="video1" width="0" height="0" border="0"/></div></center>
<center><img id="foto1" width="0" height="0" border="0"/></div></center>
</td>
</tr>
<tr>
<td>
<br>
<!- Formulier noemt vraagform en de eerste tekst wordt uit de colom Vraag van
de database gehaalt ->
<big><b>Vraag: <SPAN id="Qnr"></SPAN></b></big>
<div><SPAN id="Question"></SPAN></div><br>
<div><SPAN id="Score"></SPAN></div><br>
<!- Hier worden de antwoorden in radio buttons vanuit de db gehaalt ->
<input type="radio" name="score" onClick="validatie(this.value)"
value="1"><SPAN id="an1"></SPAN><br>
<input type="radio" name="score" onClick="validatie(this.value)"
value="2"><SPAN id="an2"></SPAN><br>
<input type="radio" name="score" onClick="validatie(this.value)"
value="3"><SPAN id="an3"></SPAN><br>
<input type="radio" name="score" onClick="validatie(this.value)"
value="4"><SPAN id="an4"></SPAN><br>
</td>
</tr>
</table>
</form>
<form action="no_action" method="POST" id="ss-form">
<!- name, testname (last Vraagnr), score, nr of questions, nr of answers made->
<input type="hidden" name="entry.0.single" value="" class="ss-q-short"
id="entry_0">
<input type="hidden" name="entry.1.single" value="" class="ss-q-short"
id="entry_1">
<input type="hidden" name="entry.2.single" value="" class="ss-q-short"
id="entry_2">
<input type="hidden" name="entry.3.single" value="" class="ss-q-short"
id="entry_3">
<input type="hidden" name="entry.4.single" value="" class="ss-q-short"
id="entry_4">
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input type="submit" name="submit" onclick="submitForm()" value="Uitslag
Insturen">
</form>
<!- dit zijn de navigatieknoppen mon door de db te wandelen ->
<INPUT ID=cmdNavFirst TYPE=BUTTON VALUE="<<"
onclick="Navigate(this.value)">
<INPUT ID=cmdNavPrev TYPE=BUTTON VALUE="<" STYLE="width:20px"
onclick="Navigate(this.value)">
<INPUT ID=cmdNavNext TYPE=BUTTON VALUE=">" STYLE="width:20px"
onclick="Navigate(this.value)">
<INPUT ID=cmdNavLast TYPE=BUTTON VALUE=">>"
onclick="Navigate(this.value)">
<br>
<div id="content_div" style="font-size:20pt; padding:5px; text-align:
center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
]]>
</Content>
</Module>
?
![http://www.wpclipart.com/education/awards/certificate/award_certificate_with_gold_seal.jpg"](http://www.wpclipart.com/education/awards/certificate/award_certificate_with_gold_seal.jpg"){kind=link}
![http://www.wpclipart.com/education/awards/good_work_medal.jpg"](http://www.wpclipart.com/education/awards/good_work_medal.jpg"){kind=link}