Сборка массива для jsPDF без нулевых переменных

Question

Сборка массива для jsPDF без нулевых переменных

Я пытаюсь выяснить что-то, что привело меня к тому, что я даже не видел лес сквозь деревья. Я нуб, когда дело доходит до JavaScript, и я обычно использую базу данных для сортировки, но у меня нет такой возможности.

На самом деле я работаю над:

Это приложение для викторины, которое просит пользователей ответить на вопрос (конкретный ответ / соответствие SCORM), а затем другой вопрос (свободный текст / длинный текст). Эта конкретная часть кода используется для создания вывода PDF ответов пользователя (с небольшим количеством информации заголовка).

Я должен использовать JavaScript для создания PDF (используя "jsPDF - Parallax"), который выводит набор переменных, которые я сгенерировал где-то еще. Например

//VARIABLES........................................................................

var NoofQuesAnswered = VarNoofQuesAnswered.getValue();
var User_Score = VarUser_Score.getValue();
var CorrectImagData = 'data:image/jpeg;base64,/9j/etc/etc'; //Omitted actual 64base text
var IncorrectImgData = 'data:image/jpeg;base64,/9j/etc/etc'; //Omitted actual 64base text

/* General Text Values */
var notAnswered = '~~~null~~~';
var questionExcludedTitle = 'Question Excluded';
var questionAnswerGivenTitle = 'Answer Given';
var openQuestionTitle = 'Open Question';

/* Question Title - Variables */
var questionTitle_1 = 'Question 1';
var questionTitle_2 = 'Question 2';
var questionTitle_3 = 'Question 3';
var questionTitle_4 = 'Question 4';
var questionTitle_5 = 'Question 5';
var questionTitle_N = 'Question N';

/* Question Response/Answer Given - Variables */

//These variables are determined elsewhere (XML/Javascript)
var UsersAnswer_Que1 = Var_UsersAnswer_Que1.getValue(); 
var UsersAnswer_Que2 = Var_UsersAnswer_Que2.getValue();
var UsersAnswer_Que3 = Var_UsersAnswer_Que3.getValue();
var UsersAnswer_Que4 = Var_UsersAnswer_Que4.getValue();
var UsersAnswer_Que5 = Var_UsersAnswer_Que5.getValue();
var UsersAnswer_QueN = Var_UsersAnswer_QueN.getValue();

/* Open Question - Variables */

var openQuestion_1 = 'Why are young people potentially at risk?';
var openQuestion_2 = 'Why are there champions for young people?';
var openQuestion_3 = 'How does social media impact on the lives of young people?';
var openQuestion_4 = 'What kinds of support are there for young people, in your area?';
var openQuestion_5 = 'What type of information are young people most likely to need in crisis?';
var openQuestion_N = 'Open question (n)';

/* Open Question - User Response/Answer Given Variables */

//These variables are determined elsewhere (XML/Javascript)
var UserResp_LongTextQue_1 = Var_UserResp_LongTextQue_1.getValue();
var UserResp_LongTextQue_2 = Var_UserResp_LongTextQue_2.getValue();
var UserResp_LongTextQue_3 = Var_UserResp_LongTextQue_3.getValue();
var UserResp_LongTextQue_4 = Var_UserResp_LongTextQue_4.getValue();
var UserResp_LongTextQue_5 = Var_UserResp_LongTextQue_5.getValue();
var UserResp_LongTextQue_N = Var_UserResp_LongTextQue_N.getValue();

Затем, используя jsPDF, я создаю страницу, подобную этой, для настройки информации заголовка на первой странице (единственной странице, на которой имеется другое содержимое:

function genPDF() { //Function to output the pdf using jsPDF

  var doc = new jsPDF();

  /* Begin Page Build */

  // Page Header Space........................................................................

  /* There are some other logos and other header bits here but I have ommitted them due to copyright */

  doc.setFont('helvetica')

  doc.setFontSize(30)
  doc.text(50, 55, 'Results and Responses')

  doc.setFontSize(14)
  doc.text(45, 78, 'No. of Questions Answered -')
  doc.text(113, 78, NoofQuesAnswered)

  doc.text(125, 78, 'Final score -')
  doc.text(158, 78, User_Score)

  doc.line(20, 82, 195, 82)

  // Questions with responses

  /* This is the point at which i need to build the page dynamically becasue the stuff above is all static and everything below could be built dynically */

  // Question_1

  doc.line(20, 113, 195, 113)

  if (Var_UsersAnswer_Que1.equals(notAnswered)) {
    doc.setFontSize(25)
    doc.text(65, 125, questionTitle_1)
    doc.line(20, 130, 195, 130)
    doc.setFontSize(30)
    doc.text(58, 155, questionExcludedTitle)
  } else {
    doc.setFontSize(14)
    doc.text(20, 120, questionAnswerGivenTitle)
    doc.setFontSize(12)
    var splitUsersAnswer_Que1 = doc.splitTextToSize(usersAnswer_Que1, 150);
    doc.text(20, 127, splitUsersAnswer_Que1)

    doc.line(20, 130, 195, 130)

    doc.setFontSize(14)
    doc.text(20, 137, openQuestionTitle)

    doc.setFontSize(12)
    var splitOpenQuestion_1 = doc.splitTextToSize(openQuestion_1, 180);
    doc.text(20, 145, splitOpenQuestion_1)

    if (Var_UsersAnswer_Que1.isCorr('\u0041\u006C\u006C\u0020\u0061\u0072\u0065')) {
      doc.addImage(CorrectImagData, 'Correct Image', 185, 115, 10, 11)
    } else {
      doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 115, 10, 11)
    }

    doc.setFontSize(12)
    var splitUserResp_LongTextQue_1 = doc.splitTextToSize(userResp_LongTextQue_1, 170);
    doc.text(20, 160, splitUserResp_LongTextQue_1)
    doc.line(20, 153, 195, 153)
  }

  // Question_2

  doc.line(20, 190, 195, 190)

  if (Var_UsersAnswer_Que2.equals(notAnswered)) {
    doc.setFontSize(25)
    doc.text(65, 202, questionTitle_2)
    doc.line(20, 207, 195, 207)
    doc.setFontSize(30)
    doc.text(58, 232, questionExcludedTitle)
  } else {
    doc.setFontSize(14)
    doc.text(20, 197, questionAnswerGivenTitle)
    doc.setFontSize(12)
    var splitUsersAnswer_Que2 = doc.splitTextToSize(usersAnswer_Que2, 150);
    doc.text(20, 204, splitUsersAnswer_Que2)

    doc.line(20, 207, 195, 207)

    doc.setFontSize(14)
    doc.text(20, 214, openQuestionTitle)

    doc.setFontSize(12)
    var splitOpenQuestion_2 = doc.splitTextToSize(openQuestion_2, 180);
    doc.text(20, 222, splitOpenQuestion_2)

    if (Var_UsersAnswer_Que2.isCorr('\u0049\u006E\u0066\u006F\u0072\u006D\u0061\u0074\u0069\u006F\u006E')) {
      doc.addImage(CorrectImagData, 'Correct Image', 185, 192, 10, 11)
    } else {
      doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 192, 10, 11)
    }

    doc.setFontSize(12)
    var splitUserResp_LongTextQue_2 = doc.splitTextToSize(userResp_LongTextQue_2, 170);
    doc.text(20, 237, splitUserResp_LongTextQue_2)
    doc.line(20, 230, 195, 230)
  }

  //New Page - From here down, the position of everything on the page will be the same

  doc.addPage()

  // Question_3

  doc.line(20, 13, 195, 13)

  if (Var_UsersAnswer_Que3.equals(notAnswered)) {
    doc.setFontSize(25)
    doc.text(65, 25, questionTitle_3)
    doc.line(20, 30, 195, 30)
    doc.setFontSize(30)
    doc.text(58, 55, questionExcludedTitle)
  } else {
    doc.setFontSize(14)
    doc.text(20, 20, questionAnswerGivenTitle)
    doc.setFontSize(12)
    var splitUsersAnswer_Que3 = doc.splitTextToSize(usersAnswer_Que3, 150);
    doc.text(20, 27, splitUsersAnswer_Que3)

    doc.line(20, 30, 195, 30)

    doc.setFontSize(14)
    doc.text(20, 37, openQuestionTitle)

    doc.setFontSize(12)
    var splitOpenQuestion_3 = doc.splitTextToSize(openQuestion_3, 180);
    doc.text(20, 45, splitOpenQuestion_3)

    if (Var_UsersAnswer_Que3.isCorr('\u0041\u006C\u006C\u0020')) {
      doc.addImage(CorrectImagData, 'Correct Image', 185, 15, 10, 11)
    } else {
      doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 15, 10, 11)
    }

    doc.setFontSize(12)
    var splitUserResp_LongTextQue_3 = doc.splitTextToSize(userResp_LongTextQue_3, 170);
    doc.text(20, 60, splitUserResp_LongTextQue_3)
    doc.line(20, 53, 195, 53)
  }

  // Question_4

  doc.line(20, 90, 195, 90)

  if (Var_UsersAnswer_Que4.equals(notAnswered)) {
    doc.setFontSize(25)
    doc.text(65, 102, questionTitle_4)
    doc.line(20, 107, 195, 107)
    doc.setFontSize(30)
    doc.text(58, 132, questionExcludedTitle)
  } else {
    doc.setFontSize(14)
    doc.text(20, 97, questionAnswerGivenTitle)
    doc.setFontSize(12)
    var splitUsersAnswer_Que4 = doc.splitTextToSize(usersAnswer_Que4, 150);
    doc.text(20, 104, splitUsersAnswer_Que4)

    doc.line(20, 107, 195, 107)

    doc.setFontSize(14)
    doc.text(20, 114, openQuestionTitle)

    doc.setFontSize(12)
    var splitOpenQuestion_4 = doc.splitTextToSize(openQuestion_4, 180);
    doc.text(20, 122, splitOpenQuestion_4)

    if (Var_UsersAnswer_Que4.isCorr('\u0041\u006C\u006C\u0020\u0061\u0072\u0065\u0020')) {
      doc.addImage(CorrectImagData, 'Correct Image', 185, 92, 10, 11)
    } else {
      doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 92, 10, 11)
    }

    doc.setFontSize(12)
    var splitUserResp_LongTextQue_4 = doc.splitTextToSize(UserResp_LongTextQue_4, 170);
    doc.text(20, 137, splitUserResp_LongTextQue_4)
    doc.line(20, 130, 195, 130)
  }

  // Question_5

  doc.line(20, 167, 195, 167)

  if (Var_UsersAnswer_Que5.equals(notAnswered)) {
    doc.setFontSize(25)
    doc.text(65, 179, questionTitle_5)
    doc.line(20, 184, 195, 184)
    doc.setFontSize(30)
    doc.text(58, 209, questionExcludedTitle)
  } else {
    doc.setFontSize(14)
    doc.text(20, 174, questionAnswerGivenTitle)
    doc.setFontSize(12)
    var splitUsersAnswer_Que5 = doc.splitTextToSize(usersAnswer_Que5, 150);
    doc.text(20, 181, splitUsersAnswer_Que5)

    doc.line(20, 184, 195, 184)

    doc.setFontSize(14)
    doc.text(20, 191, openQuestionTitle)

    doc.setFontSize(12)
    var splitOpenQuestion_5 = doc.splitTextToSize(openQuestion_5, 180);
    doc.text(20, 199, splitOpenQuestion_5)

    if (Var_UsersAnswer_Que5.isCorr('\u0048\u006F\u0077\u0020\u0074\u006F\u0020\u0067\u0065\u0074')) {
      doc.addImage(CorrectImagData, 'Correct Image', 185, 169, 10, 11)
    } else {
      doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 169, 10, 11)
    }

    doc.setFontSize(12)
    var splitUserResp_LongTextQue_5 = doc.splitTextToSize(openQuestion_5, 170);
    doc.text(20, 214, splitUserResp_LongTextQue_5)
    doc.line(20, 207, 195, 207)
  }

  //New Page - There are another 55 questions

  // doc.addPage()

  /* Question_N

  doc.line(20, 13, 195, 13)

  if (Var_UsersAnswer_QueN.equals(notAnswered)) {
   doc.setFontSize(25)
   doc.text(65, 25, questionTitle_N)
   doc.line(20, 30, 195, 30)
   doc.setFontSize(30)
   doc.text(58, 55, questionExcludedTitle)
  } else {
   doc.setFontSize(14)
   doc.text(20, 20, questionAnswerGivenTitle)
   doc.setFontSize(12)
   var splitUsersAnswer_QueN = doc.splitTextToSize(usersAnswer_QueN, 150);
   doc.text(20, 27, splitUsersAnswer_QueN)

   doc.line(20, 30, 195, 30)

   doc.setFontSize(14)
   doc.text(20, 37, openQuestionTitle)

   doc.setFontSize(12)
   var splitOpenQuestion_N = doc.splitTextToSize(openQuestion_N, 180);
   doc.text(20, 45, splitOpenQuestion_N)

   if (Var_UsersAnswer_QueN.isCorr('\u0041\u006C\u006C\u0020')) {
    doc.addImage(CorrectImagData, 'Correct Image', 185, 15, 10, 11)
   } else {
    doc.addImage(IncorrectImgData, 'Incorrect Image', 185, 15, 10, 11)
   }

   doc.setFontSize(12)
   var splitUserResp_LongTextQue_N = doc.splitTextToSize(userResp_LongTextQue_N, 170);
   doc.text(20, 60, splitUserResp_LongTextQue_N)
   doc.line(20, 53, 195, 53)
  }
 
  etc................................................
 
  */

  // Save document/Create PDF

  doc.save('Test.pdf');
}

На данный момент результатом этого кода является создание pdf-файла с каждым вопросом (1-60) с заранее определенной позицией страницы для каждого вопроса и каждого элемента для этого конкретного вопроса. Однако он проверит, есть ли ответ (пользователей просят ответить только на 30 случайно определенных вопросов на все 60 вопросов), и если нет ответа на этот вопрос (потому что приложение даже не представило, что вопрос пользователю) он будет говорить "Вопрос исключен", но оставит место на странице.

В результате я получаю более 40 страниц, где только ответы на вопросы отображают ответ пользователя, а исключенные вопросы отображаются как таковые.

Я хотел бы иметь возможность динамически создавать страницу, используя (я думаю) массив, который заполняется переменными, как только он установил вопросы, на которые не были даны ответы, а затем полностью игнорировал их, прежде чем создавать PDF-файл только с вопросами. что пользователь ответил.

Я пытаюсь добиться уменьшения количества страниц на основе количества вопросов, на которые ответил пользователь (это может быть 1 или 2, но может достигать 30). Я не могу понять, что из-за того, что я должен указать фактическое положение на странице для каждого элемента, я не могу просто заставить его автоматически складывать их И потому, что мне нужно использовать Javascript, я могу Запрашивайте ответы, а затем вставляйте их на страницу на лету.

Любая помощь будет принята с благодарностью.

Я мог бы пойти по совершенно неправильному пути, поэтому счастлив услышать лучший подход.

Заранее спасибо.

0

javascript arrays variables parallax.js

Источник

user8925005 11 ноя '17 в 18:02

1 ответ

Решение

Другие вопросы по тегам javascript arrays variables parallax.js

user2609939 11 ноя '17 в 18:27 2017-11-11 18:27 · Accepted Answer · 2017-11-11 18:27

Звучит так, будто вы просто хотите получить массив ответов, отфильтрованных по нулевому значению:

const answers = [AnswerToQuestion1, AnswerToQuestion2, AnswerToQuestion3].filter(x => x);

функция фильтра это удаление любых записей, которые являются нулевыми или неопределенными. Если ваш эквивалент нулевого ответа не нулевой, а представляет собой строку или что-то еще, вы можете отфильтровать его следующим образом:

const answers = [AnswerToQuestion1, AnswerToQuestion2, AnswerToQuestion3].filter(x => x != whateverYourNullLooksLike);