Question

我为测验创建了一个静态html页面。以下是我的代码

<style>
    body {
font-family: Open Sans;
}
#quiz {display:none;}
#prev {display:none;}
#start {display:none;}
#submit{display:none;}
ul{list-style:outside none none; margin:0px; padding:0px;}
.question>div>div>div>p{    color: #fff;
background-color: #337ab7;
padding: 6px;
border-radius: 3px;}
.navbar-default {background-color: #fff;border-color: #ddd; border-radius:0px;}
</style>
<body>
<div class='container question'>
    <div class='row'>
        <div class='col col-md-12' id='quiz'>
        </div>
    </div>
</div>

<div class='container question' >
<div class='row' id='quiz'>
</div>
</div>
<br/>
<div class='container'>
            <a href='#' class='btn btn-md btn-default pull-right' id='next'>Next</a>
            <a href='#' class='btn btn-md btn-default pull-left' id='prev'>Prev</a> 
            <a href='#' class='btn btn-md btn-default' id='start'>Start Over</a>


        <div class='button' id='submit' style='display:none;'>
            <input type='text' placeholder='Name' id="inputFileNameToSaveAs"/>
            <button type='submit' class='btn btn-success' onclick="saveTextAsFile()">Submit</button>
        </div>
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">


    function saveTextAsFile()
    {
    var textToSave = document.getElementById("question").text;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
    }

    function destroyClickedElement(event)
    {
        document.body.removeChild(event.target);
    }

    function loadFileAsText()
    {
        var fileToLoad = document.getElementById("fileToLoad").files[0];

        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var textFromFileLoaded = fileLoadedEvent.target.result;
            document.getElementById("inputTextToSave").value = textFromFileLoaded;
        };
        fileReader.readAsText(fileToLoad, "UTF-8");
    }

                (function() {
      var questions = [
      {
        question: "Which one is correct?",
        choices: ['a!=b', 'a=!b', 'a:=b', 'a=-b'],
        correctAnswer: 0
      },

      ];

      var questionCounter = 0; //Tracks question number
      var selections = []; //Array containing user choices
      var quiz = $('#quiz'); //Quiz div object

      // Display initial question
      displayNext();

      // Click handler for the 'next' button
      $('#next').on('click', function (e) {
        e.preventDefault();

        // Suspend click listener during fade animation
        if(quiz.is(':animated')) {        
          return false;
        }
        choose();

        // If no user selection, progress is stopped
        if (isNaN(selections[questionCounter])) {
          alert('Please make a selection!');
        } else {
          questionCounter++;
          displayNext();
        }
      });

      // Click handler for the 'prev' button
      $('#prev').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        choose();
        questionCounter--;
        displayNext();
      });

      // Click handler for the 'Start Over' button
      $('#start').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        questionCounter = 0;
        selections = [];
        displayNext();
        $('#start').hide();
      });

      // Animates buttons on hover
      $('.button').on('mouseenter', function () {
        $(this).addClass('active');
      });
      $('.button').on('mouseleave', function () {
        $(this).removeClass('active');
      });

      // Creates and returns the div that contains the questions and 
      // the answer selections
      function createQuestionElement(index) {
        var qElement = $('<div>', {
          id: 'question'
        });

        var header = $('<p>Question ' + (index + 1)  + '</p>');
        qElement.append(header);

        var question = $('<h3>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
      }

      // Creates a list of the answer choices as radio inputs
      function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
          item = $('<li>');
          input = '<input type="radio" name="answer" value=' + i + ' />';
          input += questions[index].choices[i];
          item.append(input);
          radioList.append(item);
        }
        return radioList;
      }

      // Reads the user selection and pushes the value to an array
      function choose() {
        selections[questionCounter] = +$('input[name="answer"]:checked').val();
      }

      // Displays next requested element
      function displayNext() {
        quiz.fadeOut(function() {
          $('#question').remove();

          if(questionCounter < questions.length){
            var nextQuestion = createQuestionElement(questionCounter);
            quiz.append(nextQuestion).fadeIn();
            if (!(isNaN(selections[questionCounter]))) {
              $('input[value='+selections[questionCounter]+']').prop('checked', true);
            }

            // Controls display of 'prev' button
            if(questionCounter === 1){
              $('#prev').show();
            } else if(questionCounter === 0){

              $('#prev').hide();
              $('#next').show();
            }
          }else {
            var scoreElem = displayScore();
            quiz.append(scoreElem).fadeIn();
            $('#next').hide();
            $('#prev').hide();
            $('#start').show();
            $('#submit').show();
          }
        });
      }

      // Computes score and returns a paragraph element to be displayed
      function displayScore() {
        var score = $('<h4>',{id: 'question'});

        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }

        score.append('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        return score;
      }
    })();


    </script>
        </body>

一切正常但我想将已检查的单选按钮值和最终结果保存在.txt文件中我希望用户保存所有答案以及正确和错误。

Answer 1

我假设你想为自己保存数据，而不是最终用户。

如果您想生成一个txt文件并下载它 - 您可以参考Sagar V的答案。

您无法使用网络浏览器中的JavaScript直接将答案或任何数据保存到文件中。

你需要一个小型服务器，可能在node.js，php或java中首先在特定结构中格式化您的答案，如json，并将其作为POST请求方法参数

在服务器中解析您的参数并保存到您需要的文件

Answer 2

注意事项：
- 首先初始化变量textToSave，没有值;
- document.getElementById("question").text;应为document.getElementById("question").innerHTML;
- 在choose的正文中，将radio的值添加到变量textToSave

结果

var textToSave='';
function saveTextAsFile()
    {
   textToSave += ". Final Result : "+document.getElementById("question").innerHTML;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
    }

    function destroyClickedElement(event)
    {
        document.body.removeChild(event.target);
    }

    function loadFileAsText()
    {
        var fileToLoad = document.getElementById("fileToLoad").files[0];

        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var textFromFileLoaded = fileLoadedEvent.target.result;
            document.getElementById("inputTextToSave").value = textFromFileLoaded;
        };
        fileReader.readAsText(fileToLoad, "UTF-8");
    }

                (function() {
      var questions = [
      {
        question: "Which one is correct?",
        choices: ['a!=b', 'a=!b', 'a:=b', 'a=-b'],
        correctAnswer: 0
      },

      ];

      var questionCounter = 0; //Tracks question number
      var selections = []; //Array containing user choices
      var quiz = $('#quiz'); //Quiz div object

      // Display initial question
      displayNext();

      // Click handler for the 'next' button
      $('#next').on('click', function (e) {
        e.preventDefault();

        // Suspend click listener during fade animation
        if(quiz.is(':animated')) {        
          return false;
        }
        choose();

        // If no user selection, progress is stopped
        if (isNaN(selections[questionCounter])) {
          alert('Please make a selection!');
        } else {
          questionCounter++;
          displayNext();
        }
      });

      // Click handler for the 'prev' button
      $('#prev').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        choose();
        questionCounter--;
        displayNext();
      });

      // Click handler for the 'Start Over' button
      $('#start').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        questionCounter = 0;
        selections = [];
        displayNext();
        $('#start').hide();
      });

      // Animates buttons on hover
      $('.button').on('mouseenter', function () {
        $(this).addClass('active');
      });
      $('.button').on('mouseleave', function () {
        $(this).removeClass('active');
      });

      // Creates and returns the div that contains the questions and 
      // the answer selections
      function createQuestionElement(index) {
        var qElement = $('<div>', {
          id: 'question'
        });

        var header = $('<p>Question ' + (index + 1)  + '</p>');
        qElement.append(header);

        var question = $('<h3>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
      }

      // Creates a list of the answer choices as radio inputs
      function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
          item = $('<li>');
          input = '<input type="radio" name="answer" value=' + i + ' />';
          input += questions[index].choices[i];
          item.append(input);
          radioList.append(item);
        }
        return radioList;
      }

      // Reads the user selection and pushes the value to an array
      function choose() {
        selections[questionCounter] = +$('input[name="answer"]:checked').val();
        textToSave += "Choosen Value : "+selections[questionCounter];
      }

      // Displays next requested element
      function displayNext() {
        quiz.fadeOut(function() {
          $('#question').remove();

          if(questionCounter < questions.length){
            var nextQuestion = createQuestionElement(questionCounter);
            quiz.append(nextQuestion).fadeIn();
            if (!(isNaN(selections[questionCounter]))) {
              $('input[value='+selections[questionCounter]+']').prop('checked', true);
            }

            // Controls display of 'prev' button
            if(questionCounter === 1){
              $('#prev').show();
            } else if(questionCounter === 0){

              $('#prev').hide();
              $('#next').show();
            }
          }else {
            var scoreElem = displayScore();
            quiz.append(scoreElem).fadeIn();
            $('#next').hide();
            $('#prev').hide();
            $('#start').show();
            $('#submit').show();
          }
        });
      }

      // Computes score and returns a paragraph element to be displayed
      function displayScore() {
        var score = $('<h4>',{id: 'question'});

        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }

        score.append('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        return score;
      }
    })();

<style>
    body {
font-family: Open Sans;
}
#quiz {display:none;}
#prev {display:none;}
#start {display:none;}
#submit{display:none;}
ul{list-style:outside none none; margin:0px; padding:0px;}
.question>div>div>div>p{    color: #fff;
background-color: #337ab7;
padding: 6px;
border-radius: 3px;}
.navbar-default {background-color: #fff;border-color: #ddd; border-radius:0px;}
</style>
<body>
<div class='container question'>
    <div class='row'>
        <div class='col col-md-12' id='quiz'>
        </div>
    </div>
</div>

<div class='container question' >
<div class='row' id='quiz'>
</div>
</div>
<br/>
<div class='container'>
            <a href='#' class='btn btn-md btn-default pull-right' id='next'>Next</a>
            <a href='#' class='btn btn-md btn-default pull-left' id='prev'>Prev</a> 
            <a href='#' class='btn btn-md btn-default' id='start'>Start Over</a>


        <div class='button' id='submit' style='display:none;'>
            <input type='text' placeholder='Name' id="inputFileNameToSaveAs"/>
            <button type='submit' class='btn btn-success' onclick="saveTextAsFile()">Submit</button>
        </div>
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>


        </body>

Answer 3

function downloadFile(filename, content) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

如何使用JavaScript在.txt文件中保存html页面内容？

3 个答案: