Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.50

Adorners - Change question title colors


                        
    
        Survey.StylesManager.applyTheme("defaultV2");
    



                
                    var json = {
  "title": "American History",
  "showProgressBar": "bottom",
  "showTimerPanel": "top",
  "maxTimeToFinishPage": 10,
  "maxTimeToFinish": 25,
  "firstPageIsStarted": true,
  "startSurveyText": "Start Quiz",
  "pages": [
    {
      "elements": [
        {
          "type": "html",
          "html": "You are about to start quiz by history. <br/>You have 10 seconds for every page and 25 seconds for the whole survey of 3 questions.<br/>Please click on <b>'Start Quiz'</b> button when you are ready."
        }
      ]
    },
    {
      "elements": [
        {
          "type": "radiogroup",
          "name": "civilwar",
          "title": "When was the Civil War?",
          "choices": [
            "1750-1800",
            "1800-1850",
            "1850-1900",
            "1900-1950",
            "after 1950"
          ],
          "correctAnswer": "1850-1900"
        }
      ]
    },
    {
      "elements": [
        {
          "type": "radiogroup",
          "name": "libertyordeath",
          "title": "Who said 'Give me liberty or give me death?'",
          "choicesOrder": "random",
          "choices": [
            "John Hancock",
            "James Madison",
            "Patrick Henry",
            "Samuel Adams"
          ],
          "correctAnswer": "Patrick Henry"
        }
      ]
    },
    {
      "maxTimeToFinish": 15,
      "elements": [
        {
          "type": "radiogroup",
          "name": "magnacarta",
          "title": "What is the Magna Carta?",
          "choicesOrder": "random",
          "choices": [
            "The foundation of the British parliamentary system",
            "The Great Seal of the monarchs of England",
            "The French Declaration of the Rights of Man",
            "The charter signed by the Pilgrims on the Mayflower"
          ],
          "correctAnswer": "The foundation of the British parliamentary system"
        }
      ]
    }
  ],
  "completedHtml": "<h4>You have answered correctly <b>{correctedAnswers}</b> questions from <b>{questionCount}</b>.</h4>"
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  />, document.getElementById("surveyElement"));
        
function saveSurveyToPdf(filename, surveyModel, pdfWidth, pdfHeight) {
    var options = {
        format: [pdfWidth, pdfHeight]
    };
    var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.mode = "display";
    surveyPDF
        .onRenderQuestion
        .add(function (survey, options) {
            //debugger;
            var plainBricks = options
                .bricks[0]
                .unfold();
            if(options.question.isAnswerCorrect()) {
                // Change the title color to green for correct answers
                plainBricks[0].textColor = "#00ff00";
                plainBricks[1].textColor = "#00ff00";
            } else {
                // Change the title color to red for incorrect answers
                plainBricks[0].textColor = "#ff0000";
                plainBricks[1].textColor = "#ff0000";
            }

            return new Promise(function (resolve) {
                resolve();
            });
        });

    surveyPDF.save(filename);
}

document
    .getElementById("saveToPDFbtn")
    .onclick = function () {
        var pdfWidth = survey.pdfWidth || 210;
        var pdfHeight = survey.pdfHeight || 297;
        saveSurveyToPdf("surveyResult.pdf", survey, pdfWidth, pdfHeight);
    };

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Adorners - Change question title colors, Reactjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<link href="/DevBuilds/survey-core/modern.css" type="text/css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/jspdf/dist/polyfills.umd.js"></script>
<script src="https://unpkg.com/jspdf@2.3.0/dist/jspdf.umd.min.js"></script>
<script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.js"></script>    <script src="/DevBuilds/survey-pdf/survey.pdf.min.js"></script>

</head>
<body style="margin: 0">
    
<button id="saveToPDFbtn" style="margin:10px">Save to PDF</button>            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>
Settings