SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>贝尔滨团队成员自我感觉问卷</title>
    <style>
        .pagination{
            padding-top: 5px;
        }
        body{padding-top: 40px;}
        #opBt button{margin-bottom: 40px}
    </style>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
</head>

<body>
<div id='app'>
    <div class="container">
        <div class="row" v-if="page==1">
            <div class="col-sm text-center">
                <p>
                    <h4>贝尔滨团队成员自我感觉问卷</h4>
                </p>
            </div>
        </div>
        <div class="row" v-if="page==1">
            <div class="col-sm">
                说明:
                <ul>
                <li>此问卷共含七个问题,每个部分有10个句子</li>
                <li>每部分共有10个分值。你可以将这10分分配给该部分中你人认为最准确描述了你的行为和感觉的句子,</li>
                <li>你也可以将这10分分配给几个句子。在极端的情况下,你可以给每个句子分配1分或者给一个句子分配10分</li>
                <li>你的选择没有“对”或者“错”之分</li>
            </ul>
            </div>
        </div>
        <div class="row" v-if="page==2">
            <div class="col-sm ">
                <p>
                <b>{{qa.title}}<span :class="{'text-danger':allScore<10,'text-success':allScore==10}">(总分{{allScore}}/10)</span></b>
                </p>
                <ul class="list-group">
                    <li class="list-group-item text-left" v-for="(v,i) in qa.answer">{{v.aTitle}}
                        <ul class="pagination pagination-sm">
                            <li class="page-item " :class="{active:v.score==(index-1)}"  v-for="index of 11" @click="setScore(i,index-1)">
                              <span class="page-link" >
                                {{index-1}}
                              </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row" v-if="page==3">
            <div class="col-sm ">
                <p>
                    <b>测试结果(蓝色选中为您的角色)</b>
                </p>
                <ul class="list-group">
                    <li class="list-group-item text-left " :class="{active:v.score==resultMaxNum}" v-for="(v,i) in result">{{v.title}}--(得分{{v.score}})

                    </li>
                </ul>
            </div>
        </div>
        <div class="row" id="opBt">
            <div class="col-sm text-center">
                <br/>
                <button type="button" class="btn btn-secondary" @click="goNext(-1)" v-if="page==2">上一题</button>
                <button type="button" class="btn btn-danger" @click="resetQuestion"  v-if="page==1">重置答案</button>
                <button type="button" class="btn btn-success" @click="goNext(1)"  v-if="page==1">开始回答</button>
                <button type="button" class="btn btn-primary" @click="goNext(1)"  v-if="questionNum<7&&page==2">下一题(总分{{allScore}}/10)</button>
                <button type="button" class="btn btn-success" @click="goSubmit()" v-if="questionNum==7&&page==2">提交</button>
                <button type="button" class="btn btn-success" @click="goHome()" v-if="page==3">返回首页</button>
                <br/>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>

    /*试题*/
    var allQuestion=[
        {
            title:'A.我认为自己能为团队做出的贡献是:',
            answer:[
                 {aTitle:'10.我能很快地发现并把握住新的机遇。',score:'0'}
                ,{aTitle:'11.无论是在一般的问题上还是在具体的问题上,我做出的评论都是很容易被别人接受的。',score:'0'}
                ,{aTitle:'12.我能与各种类型的人合作共事。',score:'0'}
                ,{aTitle:'13.我生来就爱出主意。',score:'0'}
                ,{aTitle:'14.我的能力在于,一旦发现某些人对实现集体目标很有价值,我就及时把他们推荐出来。',score:'0'}
                ,{aTitle:'15.我可以令人放心,我能把事情办成,这主要是靠我个人的实力。',score:'0'}
                ,{aTitle:'16.技术、知识和经验通常是我的主要财富。',score:'0'}
                ,{aTitle:'17.为了最终导致有益的结果,我愿直言不讳,哪怕面对暂时的冷遇。',score:'0'}
                ,{aTitle:'18.通常我能知道什么是现实的、什么是可能的。',score:'0'}
                ,{aTitle:'19.在选择行动方案时,我能理由充分、不带倾向性、也不带偏见地提出一个合理的替代方案。',score:'0'}
            ]
        },
        {
            title:'B.在团队中,我可能的缺点是:',
            answer:[
                {aTitle:'20.如果会议没有得到妥善的安排、组织、控制和主持,我会感到不痛快和不自在。',score:'0'}
                ,{aTitle:'21.对于那些持有正确观点而又没有适当地发表出来的人,我容易表现得过于宽容。',score:'0'}
                ,{aTitle:'22.除非所涉及的题目是我所熟悉的,否则,我不情愿发表自己的见解。',score:'0'}
                ,{aTitle:'23.每当集体讨论新的观点或转入新的观点时,我都喜欢发表一大堆意见。',score:'0'}
                ,{aTitle:'24.我倾向于低估自己意见的重要性。',score:'0'}
                ,{aTitle:'25.我的客观看法使我很难和同事们高兴地打成一片。',score:'0'}
                ,{aTitle:'26.在处理重要问题或者一定要把事情办成时,我有时使人感到咄咄逼人或专横。',score:'0'}
                ,{aTitle:'27.可能由于我过分重视集体的气氛,我发现自己很难与众不同。',score:'0'}
                ,{aTitle:'28.我易于忘我地陷入突发奇想,而忽略了正在发生的实在的事情。',score:'0'}
                ,{aTitle:'29.对不完整、不充分的建议或计划,我不愿意发表自己的观点,因而我的同事认为我过分注意细节,容易担心一些细节会把事情搞糟。',score:'0'}

            ]
        }
        ,
        {
            title:'C.当同他人共同完成一个项目时:',
            answer:[
                {aTitle:'30.我具有不用施加压力就能影响别人的能力。',score:'0'}
                ,{aTitle:'31.我随时注意防止因粗心而引起的工作的错误、遗漏或失败。',score:'0'}
                ,{aTitle:'32.我喜欢反复要求采取行动,确保会议不至浪费时间或者离题太远。',score:'0'}
                ,{aTitle:'33.在提出创意或独到见解方面,我是数一数二的。',score:'0'}
                ,{aTitle:'34.对于有助于大家共同利益的好建议,我总是乐意支持。',score:'0'}
                ,{aTitle:'35.人们都相信我是绝对真诚的。',score:'0'}
                ,{aTitle:'36.我热衷寻求并能很快发现新的见解、以及新的发展的可行性。',score:'0'}
                ,{aTitle:'37.我努力保持自己的专业精神。',score:'0'}
                ,{aTitle:'38.我相信自己的判断能力有助于做出正确的决策。',score:'0'}
                ,{aTitle:'39.我能使人放心的是:对于工作我能组织得“井井有条”,确保达到要求。',score:'0'}

            ]
        }
        ,
        {
            title:'D.我在工作团队中的特征是:',
            answer:[
                {aTitle:'40.我有兴趣设法更多地了解同事们。',score:'0'}
                ,{aTitle:'41.我在我熟悉的领域里做出自己的贡献。',score:'0'}
                ,{aTitle:'42.我经常向别人的观点和见解进行挑战,或者坚持自己的少数意见。',score:'0'}
                ,{aTitle:'43.在争辩或辩论中我通常能找到一系列论据去推翻那些不好的、无理的主张或建议。',score:'0'}
                ,{aTitle:'44.只要一个计划必需开始付诸实施,我觉得我有推动工作运转、把事情进行下去的才能。',score:'0'}
                ,{aTitle:'45.我喜欢避开显而易见的东西,而去引出未被探讨的问题。',score:'0'}
                ,{aTitle:'46.对于承担的任何工作,我总希望能做到尽善尽美。',score:'0'}
                ,{aTitle:'47.我喜欢与团队或机构之外的人进行联系、建立关系。',score:'0'}
                ,{aTitle:'48.我喜欢工作关系中人际交往的一面。',score:'0'}
                ,{aTitle:'49.尽管我有兴趣听所有的观点,但这并不影响我在需要做出决定时毫不犹豫地下决心。',score:'0'}

            ]
        }
        ,
        {
            title:'E.在工作中,我获得满足,是因为:',
            answer:[
                {aTitle:'50.我喜欢分析情况,权衡所有可能的选择。',score:'0'}
                ,{aTitle:'51.我喜欢找出解决问题的可行方案。',score:'0'}
                ,{aTitle:'52.我感到自己在促进良好的工作关系,我喜欢这种感觉。',score:'0'}
                ,{aTitle:'53.我对决策能有强大的影响力。',score:'0'}
                ,{aTitle:'54.我喜欢接触并能适应那些持有不同观点或者新想法的人。',score:'0'}
                ,{aTitle:'55.我能使人们在关键问题和目标上达成一致意见。',score:'0'}
                ,{aTitle:'56.如果可以全情投入一件工作,我感到“得其所哉!”',score:'0'}
                ,{aTitle:'57.我很高兴自己能找到可以发挥、扩大自己想象力的机会或者天地。',score:'0'}
                ,{aTitle:'58.我感到自己有效地发挥了自己的独特的资质、学识和技能。',score:'0'}
                ,{aTitle:'59.我常常感觉到工作使我有机会表达自己。',score:'0'}
            ]
        }
        ,
        {
            title:'F.如果突然给我一个困难的任务,而且时间有限、需要和不熟悉的人合作:',
            answer:[
                {aTitle:'60.不论环境如何,我总能成功。',score:'0'}
                ,{aTitle:'61.我宁愿先躲进角落,尽量多地搜索、钻研有关的资料,拟定解脱困境的方案。',score:'0'}
                ,{aTitle:'62.我会自己设计解决方案,然后努力将它向团队推销宣传。',score:'0'}
                ,{aTitle:'63.我愿意同表示出积极态度的人一起工作。',score:'0'}
                ,{aTitle:'64.我会找到用人所长的方法,以减轻工作负担。',score:'0'}
                ,{aTitle:'65.我天生的急迫感将有助于保证我们不会落后在时间表后面。',score:'0'}
                ,{aTitle:'66.我相信我能保持头脑冷静,不受干扰、富有条理地思考问题。',score:'0'}
                ,{aTitle:'67.尽管困难重重,我会抓紧该做的工作。',score:'0'}
                ,{aTitle:'68.如果团队没有起色,我会带头发挥作用,采取积极措施加以推动。',score:'0'}
                ,{aTitle:'69.我愿意展开广泛的讨论,以此激发新的思想并推动工作的开展。',score:'0'}

            ]
        }
        ,
        {
            title:'G.对于在团队中工作,或与周边的人共事时遇到的问题:',
            answer:[
                {aTitle:'70.当有人妨碍进展时,我很容易表现出不耐烦,甚至做出过激的反应。',score:'0'}
                ,{aTitle:'71.别人可能批评我太过重于分析而缺少直觉。',score:'0'}
                ,{aTitle:'72.我喜欢核对每个重要的细节,确保准确无误,但这种做法并不总是受欢迎的。',score:'0'}
                ,{aTitle:'73.我常常容易会觉得厌烦和无聊,需要一两个有激情的人使我振作起来。',score:'0'}
                ,{aTitle:'74.我觉得除非目标明确,否则做事很难开始。',score:'0'}
                ,{aTitle:'75.对于我遇到的复杂问题,我有时不善于向他人解释和澄清。',score:'0'}
                ,{aTitle:'76.对那些自己做不了的事情,我有意识地求助他人。',score:'0'}
                ,{aTitle:'77.我发现别人不给我足够的机会,让我把我想说的全都说出来。',score:'0'}
                ,{aTitle:'78.我容易产生这样的念头:“这是正浪费时间,我自己一个人会把事情做得更好。”',score:'0'}
                ,{aTitle:'79.在难对付的或者当权的人物面前,我没有把握能让对方理解自己的观点,因而不愿直截了当地说出来。',score:'0'}
            ]
        }

    ]

    var val=localStorage.getItem('bebTest_ps')
    if(val!=undefined){
        allQuestion=JSON.parse(val)
    }


</script>
<script>
    new  Vue(
        {
            el:'#app',
            data:{
                page:1,//显示页码
                questionNum:0,
                question:allQuestion,
                qa:{title:'无',answer: [{score:10}]},
                result:[
                     {title:'PL(创新者)',score:0,sumArr:[13,28,33,45,57,62,75]}
                    ,{title:'RI(信息者)',score:0,sumArr:[10,23,36,47,54,69,73]}
                    ,{title:'CO(协调者)',score:0,sumArr:[14,21,30,49,55,64,76]}
                    ,{title:'SH(推进者)',score:0,sumArr:[17,26,32,42,53,68,70]}
                    ,{title:'ME(监督者)',score:0,sumArr:[19,25,38,43,50,66,71]}
                    ,{title:'TW(凝聚者)',score:0,sumArr:[12,27,34,40,52,63,79]}
                    ,{title:'IM(实干者)',score:0,sumArr:[18,20,39,44,51,67,74]}
                    ,{title:'CF(完美者)',score:0,sumArr:[15,29,31,46,56,65,72]}
                    ,{title:'SP(技术专家)',score:0,sumArr:[16,22,37,41,58,61,78]}
                    ,{title:'DR(?)',score:0,sumArr:[11,24,35,48,59,60,77]}

                ],
                resultMaxNum:0
            },
            methods:{
                goNext:function (type) { //上下翻页
                    //检查当前页面是否评分都为0

                    if(this.allScore!=10){
                        alert('分数之和必须为10,当前分数为'+this.allScore)
                        return
                    }
                    this.questionNum+=type
                    console.log(this.questionNum+','+this.question.length)
                    if (this.questionNum>0&&this.questionNum<=this.question.length){
                        this.qa=this.question[this.questionNum-1]
                    }
                    if(this.questionNum==0){
                        this.page=1
                    }
                    else{
                        this.page=2
                    }

                },
                setScore:function(answer,score) //设置分数
                {
                    var a=this.qa.answer[answer]
                    a.score=score
                    this.$set(this.qa.answer,answer, a)
                    this.$set(this.question,this.questionNum-1,this.qa)
                },
                resetQuestion:function(){ //重置答案
                    if(confirm('是否重置答案!重置之后之前的答题记录会消失')) {
                        for (i in this.question) {
                            for (j in this.question[i].answer) {
                                this.question[i].answer[j].score = 0
                            }
                        }
                        this.qa={title:'无',answer: [{score:10}]}
                        alert('重置成功!')
                    }
                    this.questionNum=0
                }
                ,
                goSubmit(){ //提交计算得分
                    tmpResult={};
                    allScoreNum=0
                    console.log(JSON.stringify(this.question))
                    for (i in this.question) {
                        if(this.question[i].title!='无')
                        {
                            for (j in this.question[i].answer) {
                                a=this.question[i].answer[j]
                                tmpResult[a.aTitle.substring(0,a.aTitle.indexOf('.'))]=a.score*1
                                allScoreNum+=a.score*1
                            }
                        }

                    }
                    console.log(tmpResult)
                    if(allScoreNum!=70){
                        alert('总分不足70分,请检查答题情况')
                        return
                    }
                    for (i=0;i<this.result.length;i++){
                        for(j=0;j<this.result[i].sumArr.length;j++){
                            this.result[i].score+=tmpResult[this.result[i].sumArr[j]]
                        }
                        this.resultMaxNum=this.resultMaxNum>this.result[i].score?this.resultMaxNum:this.result[i].score
                    }
                    this.page=3
                },
                goHome(){
                    this.page=1
                }
            },
            watch:{
                question:function (newValue) {
                    localStorage.setItem('bebTest_ps',JSON.stringify(this.question))
                },
                page:function () {
                    window.scrollTo(0,0);
                },
                questionNum:function () {
                    window.scrollTo(0,0);
                }

            },
            computed:{
                allScore:function () {
                    num=0
                    for(i=0;i<this.qa.answer.length;i++){
                        num+=this.qa.answer[i].score*1
                    }
                    return num
                }
            }
        }
    )
</script>
</html>