Validate javascript array syntax

Question

bwbwings 0 Newbie Poster

15 Years Ago

Ok, after much searching i finally decided to ask. (Newbie to this forum so I apologise if I don't use correct format)

I have built an assessment that pulls through X number of questions from a questionbank.

The questionbank sits in a single js file whilst the code controlling everything sits in another js file. This is so the users can update the questions without messing around with the code. (All this is client side - cannot run on server)

My problem is this: The question bank is in an array and the non-tech people updating it misses the quotes, commas etc needed to keep the structure of the array.

I have built a validation function (try catch etc) but if the structure of the array is compromised the system just throws out an error.

Questions:
1) Is there an alternative to using a javascript array to allow users to easily update questions without screwing up the system?
or
2) Is there a way i can validate the array for syntax and alert the user about the error?

javascript

3 Contributors
5 Replies
107 Views
16 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

essential 84 Posting Shark

15 Years Ago

Here's a simple demo--on how you can validate userInput against your array lists.
I simplify the code works by matching a color inside an array against user inputted value. If it matched any value inside the array collection then it will return true.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Validating text fields against arrays</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

iframe {
  display : block;
  border : 1px solid #405060;
  min-height : 600px;
  width : 100%; }

div#demo {
  background-color : #ccc; 
  margin-top : 2em;
  min-height : 30px;
  padding : 0 1em 0 1em;
  white-space : nowrap; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var uInput;
var makeMatch = [ "Blue", "Red", "Green", "Yellow" ];
var myArray = [ ];
var check = function() { 
   uInput = (( document.getElementById ) ? document.getElementById("txt") : (( document.all ) ? document.all.txt : document.layers.txt )).value;
   for ( var x = 0; x < makeMatch.length; x++ ) {
   myArray[ makeMatch[ x ] ] = makeMatch[ x ];
   }  
   if ( myArray[ uInput ] ) {
      alert("Matched found: \u0022" + myArray[ uInput ] + "\u0022"); 
   } else {
   alert("Sorry, no match found!");
   }
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">
<h2 class="m-title">Javascript Live Help!</h2>
<div id="demo">
<input type="text" id="txt" name="txt" value="" /> <button id="btn" name="btn" onclick="check();">Try Match</button></div>
</div>
</div>
</body>
</html>

don't hesitate to asked back if you still have any questions regarding this code...

essential 84 Posting Shark

15 Years Ago

You can filter all the entries you need, by specifying allowable characters using Regular Expression.

These demo will only add valid entries inside your array if the pattern get matched from the field.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Test Page</title>
<script type="text/javascript">
// <![CDATA[
var validate;
var count = 0; 
var check, show;
var qBank, allow;
   allow = [ ]; 
   qBank = [ ];
var qPattern = /^(What|When|Where(?=\s))[a-zA-z\-\.\'\,\d\s]{10,20}(?=\?$)/; // Force the user to enter atleast 10 characters per question and must not exceed to 20 MaXchars. 

// All Query must start in the following Qword's (What, When or Where) and must end with a Question Mark sign?.

//Or the field won't accept its entry.

//And duplicated Questions is not allowed either.

   validate = ( function( form ) {
   show = function( what ) {
      if ( qBank.length > 0 ) {
         for ( var x = count; x <= count; x++ ) {
      what.innerHTML += x + ". " + qBank[ x ] + "<br />\n";
         }
      }
   }; 
   check = function( form ) {
   div = (( document.getElementById ) ? document.getElementById("output") : (( document.all ) ? document.all.output : document.layers.output ));
      if ( allow[ form.testQ.value ] ) {
      alert( "This is a duplicated entry: (" + form.testQ.value + ").\nPlease try another question!" ); 
      return false; 
      } if ( qPattern.test( form.testQ.value ) ) {
   qBank[ count ] =  form.testQ.value; count++;
   allow[ form.testQ.value ] = form.testQ.value;
      if ( qBank.length >= 0 ) {
      qBank.push( form.testQ.value ); 
   show( div );
   return false; 
      } 
   } else { 
   alert( "This is not a valid Question: " + form.testQ.value ); 
   } return false;
};
   return {
   show : show,
   check : check };
   }());

// ]]>
</script>
</head>
<body>
<div id="main">
<form id="testForm" action="#" onsubmit="return validate.check( this );">
<div>
<label for="testQ">Test Question: <input type="text" id="testQ" name="testQ" value="" /></label> <input type="submit" id="sbm" name="sbm" value="Submit Query" />
</div>
<div style="margin-top : 1em; line-height: 1.6; color : #00f; letter-spacing : 2px;" id="output"></div>
</form>
</div>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

bwbwings 0 Newbie Poster · Answer 1 · 2009-05-29T17:34:08+00:00

bwbwings 0 Newbie Poster

15 Years Ago

x

bwbwings 0 Newbie Poster · Answer 2 · 2009-05-29T17:35:33+00:00

The difference here is that the user is actually editing the array in the code:

questionBank[0] = ['What color is the sun.',
'',
'','',
'Green', ,
'Yellow', ,
'Purple',
]

My issue is either to have another medium to store the questions or to check that the user updated the array correctly.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-05-30T01:47:57+00:00

I'm struggling to understand. What interface are the users expected to use when editing these multiple-choice questions?

As far as I can see, it must be a text editor, as a thin-client (browser) interface would not (without server-side scripting) allow the edited file to be saved anywhere other than in a cookie.

And what do the users do with the resultant files? Presumably they need to be uploaded somewhere to make them available to other people, otherwise each user would only see his/her own questions!!!

It would be easier to help if the big picture was more fully described.

Airshow