SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Nov 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'm lost, Could anyone help me with my cw please

    Greetings
    Im working on my cw and I am really lost, could anyone help me please? I am supposed to create 3 html files. First one with Introduction, second with questions and last with results. I havent write the code myself. Problem is, that I am getting the score on the wrong html. (questions instead of results html) Could anyone please modify/add my javascript file? Also, I dont like firtsj.js file, any idea how can I rewrite it so it will look better? Any help is appreciated, Alexandra.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Introduction</title>
        <link rel="stylesheet" href="../css/alexandra.css" type="text/css">
    </head>
    <body>
         <h1>Welcome to the JavaScript Quiz!</h1>
    <a href="Questions.html">
        <img src="../images/start.jpg" width="100" height="100" border="0">
    </a>
    </body>
    </html>
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Questions</title>
        <link rel="stylesheet" href="../css/zdenka.css" type="text/css">
    </head>
    <body>
    <h1>Good Luck!</h1>
    <div id="quiz1" class="quiz"></div>
    
    
    <a href="Result.html">
        <img src="../images/result.jpg" width="100" height="100">
    </a>
    <script src="../js/firstj.js" type="text/javascript"></script>
    <script src="../js/second.js" type="text/javascript"></script>
    </body>
    </html>
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Results</title>
        <link href="../css/result.css" rel="stylesheet">
    
    
    </head>
    <body>
    <div class="wrapper">
        <div class="header">
            <h1>Please, choose the group and know more about your result</h1>
        </div>
        <div class="content">
            <div id="main">
    
                <h2>Score 0 - 8</h2>
    
                <div class="answer">
                    <p>You should learn more about the JavaScript </p>
                </div>
    
                <h2>Score 9 - 15</h2>
    
                <div class="answer">
                    <p>Well done! Practice makes perfect, try again.</p>
                </div>
    
                <h2>Score 16 - 20</h2>
    
                <div class="answer">
                    <p>Perfect!</p>
                </div>
            </div>
    
        </div>
    
        <script src="../js/jquery-1.10.2.min.js"></script>
    
        <script>
            $(document).ready(function() {
                $(".answer").hide();
                $('#main').find('h2').click(function(e) {
                    var
                            self = $(this),
                            answer = $(this).next(".answer");
                    if (
                            answer.is(":visible")) {
                        answer.fadeOut();
                        self.removeClass('close');
                    } else {
                        answer.fadeIn();
                        self.addClass('close');
                    }
                });
            } );
        </script>
    </body>
    
    
    </html>

    firstj.js
    Code JavaScript:
    var quizArray = [
        '37~70~Variables declared outside a function, become~Local variables~International variables~Global variables~Universe  variables',
        '43~84~If you add a number and a string, the result will be~number~error~number + string~string',
        '8~28~In JavaScript, different kinds of Loop are~for~for/in~while~for/out',
        '18~33~JavaScript can be used to validate data in HTML forms before sending off the content to a server.~True~False',
        '36~93~JavaScript is~prototype based language~class based language~ID based language~all of above',
        '17~58~The Array object is used to store~single value~multiple values~candies~bananas',
        '120~76~What is the DOM?~Difficult Objet Model~Document Open Model~Document Object Mouse~Document Object Model',
        '50~69~Where is the correct place to insert a JavaScript?~The < head > section~The < body > section~Both of them are correct~none',
        '26~32~How do you create a variable "x" that is equal to the integer 4?~int x = 4;~num x = 4;~var x = 4;~number x =4;',
        '54~98~The window object represents~an open window in a browser~closed window in a browser~an open window in a room~closed window in a room',
        '105~76~JavaScript is not widely supported.~True~False'
    ];
    var qpp = 1; // questions per page to display
    var reslink = ""; // file to link to at end of quiz

    second .js file
    Code JavaScript:
    (function(quizArray,qpp,reslink) {
        var perPage = 0; var n1 = 109;
        var n2 = 13;
        var reslink = '';
        var qsParm = [];
        function qs()
        {var query = window.location.search.substring(1);
            var parms = query.split('&');
            for (var i=0; i<parms.length; i++) {
                var pos = parms[i].indexOf('=');
                if (pos > 0) {
                    var key = parms[i].substring(0,pos);
                    var val = parms[i].substring(pos+1);
                    qsParm[key] = val;
                }}}
        qsParm['qnum'] = 0;
        qsParm['cor'] = 0;
        qsParm['fin'] = 0;
        qs();
        var qnum = qsParm['qnum'];
        var cor = qsParm['cor'];
        cor=cor%n1;
        function loadQuiz() {
            if (qnum>=quizArray.length) displayResult();
            else {displayQuiz(ent = document.getElementById('quiz1'),qnum++);
                for(var j=2; j <= qpp; j++) {
                    if ((ent = document.getElementById('quiz'+j)) && qnum<quizArray.length) displayQuiz(ent,qnum++);}
                var newB = document.createElement("button");
                newB.style.styleFloat = 'right';
                newB.style.cssFloat = 'right';
                newB.onclick = function() {
                    nextPage(qnum);
                    return false;
                };
                var newTb = document.createTextNode('Next >>');
                newB.appendChild(newTb);
                ent.appendChild(newB);
            }}
        function displayQuiz(ent,qnum) {
            perPage++; var qna = quizArray[qnum].split('~');
            var newF = document.createElement("form");
            var newDq = document.createElement("div");
            newDq.className = 'question';
            newDq.appendChild(document.createTextNode(Number(qnum+1)+ ': ' +qna[2]));
            newF.appendChild(newDq);
            newDq = document.createElement("div");
            newDq.className = 'answers';
            for (var i = 3;
                 qna[i] != null && qna[i] != ''; i++) {
                var newDa = document.createElement("label");
                newDa.htmlFor = 'a'+qnum+i; /*@cc_on @if (@_jscript) var newR = document.createElement("<input name='a"+qnum+"'>"); @else */ var newR = document.createElement("input"); newR.name = 'a'+qnum; /* @end @*/ newR.type = 'radio'; newR.id = 'a'+qnum+i; newR.value = i; newDa.appendChild(newR); newDa.appendChild(document.createTextNode(' '+qna[i]+' ')); newDq.appendChild(newDa);} newF.appendChild(newDq); document.getElementById('quiz'+perPage).appendChild(newF);}
        function displayResult() {
            var newP = document.createElement("p");
            newP.style.textAlign = 'center';
            var newB = document.createElement("b");
            newB.appendChild(document.createTextNode('Congratulations.'));
            newB.appendChild(document.createElement("br"));
            newB.appendChild(document.createTextNode(' You have completed the quiz.'));
            newP.appendChild(newB); newP.appendChild(document.createElement("br"));
            newP.appendChild(document.createElement("br"));
            newP.appendChild(document.createTextNode('You answered ' + cor + ' of the ' + qnum + ' questions correctly.'));
            if (reslink != '') {
                newP.appendChild(document.createElement("br"));
                newA = document.createElement("a");
                newA.href=reslink + '?cor='+cor+'&qnum='+qnum;
                newA.appendChild(document.createTextNode('Find Out More'));
                newP.appendChild(newA);}
            document.getElementById('quiz1').appendChild(newP);
            var newC = document.createElement("button");
            newC.style.styleFloat = 'right';
            newC.onclick = function() {
                cor = 0;
                nextPage(0);
                return false;
            };
            newC.appendChild(document.createTextNode('Try Again'));
            document.getElementById('quiz1').appendChild(newC);
        }
        function checkAnswer(e,b,g,q){
            var a = -1; var x = (b%n2) + 2;
            for (var i=3; document.getElementById(e+i); i++) {
                if (document.getElementById(e+i).checked) {
                    a = i-3;
                }}
            var c = (g%x); return a == c?1:0;}
        function nextPage(qnum) {
            for (var i=qnum-perPage; i < qnum; i++) {
                var qna = quizArray[i].split('~');
                cor += checkAnswer('a'+i,qna[1],qna[0],i);
            }
            var thispage = self.location.href;
            var www = thispage.lastIndexOf('?');
            if (www != -1) thispage = thispage.substr(0,www);
            var p = Math.floor((Math.random() * 8) + 2);
            var m = (p * n1) +cor;
            var nxt = thispage + '?qnum='+ qnum +'&cor='+m;
            if (qnum >= quizArray.length) nxt += '&fin=1';
            top.location.href = nxt;}
        loadQuiz();
    })
        (quizArray,qpp,reslink);
    result.css file


    Code CSS:
    h1, h2, h3 {
        font-family: Arial, sans-serif;
    }
     
    h2 {
        background: url(../images/open.png) no-repeat 0 11px;
        padding: 10px 0 0 25px;
        cursor: pointer;
    }
     
    h2.close {
        background-image: url(../images/close.png);
    }
     
    .answer {
        margin-left: 25px;
    }
     
    strong {
        font-family: Arial, sans-serif;
    }
     
    em {
        font-family: Arial, sans-serif;
    }
     
    .content {
        max-width: 760px;
        margin: 20px 0 0 100px;
    }
     
    .footer {
        position: fixed;
        bottom: 0;
        left: 100px;
        width: 100%;
        padding-top: 18px;
        background: url(../images/bg-footer.png) repeat-x left top;
    }
     
     
    .clear:after {
        content: "."; display: block; height: 0; clear: both; visibility: hidden;
    }
     
    .clear {
        min-height: 1px;
    }
     
    * html .clear {
        height: 1px;
    }
     
    .header {
        position: relative;
        border-top: solid 6px white;
        padding: 10px 0 10px 0;
        margin-bottom: 20px;
    }
     
     
    .main {
        padding-bottom: 1em;
        border-bottom: solid 1px rgba(255,255,255,.5);
    }
     
    .main h1 {
        font-size: 32px;
        margin-bottom: 0.75em;
    }
     
     
    p , li, legend , form {
        font-size: 18px;
        color: blue;
        font-family: Arial, sans-serif;
        line-height: 125%;
        margin-bottom: 10px;
    }
     
     
    .footer p {
        font-size: 14px;
        font-family: Arial, sans-serif;
        padding: .5em .25em .5em 1em;
        color:rgb(55,76,119);
        background: rgb(110,138,195);
        -moz-border-radius: 2px 0 0 0;
        border-radius: 2px 0 0 0;
        margin: 0;
    }
     
     
    a {
        color: rgba(255,255,255,.75);
    }
     
     
    .example, code {
        font-family: Courier, monospaced;
        font-size: 16px;
        color: blue;
    }
     
    .unit {
        display: inline-block;
        width: 45%;
    }
    .results h2 {
        color: rgba(255,255,255,1);
    }
    .results div {
        padding-bottom: 10px;
    }
    .results div code {
        float: right;
        width: 60%;
    }
     
     
    .clearLeft {
        clear: left;
    }
    .imgRight {
        float: right;
        margin-bottom: 5px;
        margin-left: 5px;
    }
    .imgLeft {
        float: left;
        margin-bottom: 5px;
        margin-right: 5px;
    }

    alexandra.css file
    Code CSS:
    label {display:block;}
    .quiz {width:300px;}
    .quiz form {padding:3px;border:1px solid #000;}
    .quiz p {padding:3px;border:1px solid #000;}
    .quiz p b {font:120% verdana;color:#006666;}
    .question {font:90% verdana;color:#006666;margin-bottom:15px;}
    .answers {font:75% verdana;}
    Last edited by Mittineague; Dec 9, 2013 at 11:07. Reason: reformatting bbcode tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by alex400 View Post
    Problem is, that I am getting the score on the wrong html. (questions instead of results html)
    What does this actually mean?
    Could you elaborate on what is not working for you and how it is not working.

    Also, instead of posting so much code, it would help more if you could link to a page where we can see this in action.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •